仅将样式应用于选定元素，而不影响子元素答案

【问题标题】：Applying styles to only selected element, without affecting children elements仅将样式应用于选定元素，而不影响子元素
【发布时间】：2014-02-17 07:56:34
【问题描述】：

这相当简单，所以我确定我只是遗漏了一些明显的东西。

假设我有这个示例代码：

<main>
    <header>Header</header>
    <section>
        Content
    </section>
    <section>
        Content
    </section>
    <section>
        Content
    </section>
</main>

以及初始CSS：

main{text-align:center;}
section{display:inline-block;width:33%;}

所以我有三列或多或少占据页面的三分之一。现在，由于代码的编写方式，页面上会有空白。我首选的处理方法是设置*{font-size:small}，然后添加body>main{font-size:0;}。

当然，在字体相同的简单页面上也可以。但是，这里和那里有不同大小的字体和标题标签，这效果不好。

我想我只是误解了> 选择器的作用，但我要寻找的是一个为元素设置样式的选择器，而不是将所述样式应用于子元素。在这种情况下，我想为我的主要元素设置样式，但我不希望样式影响页眉或部分元素。

这样做的正确方法是什么？

在任何人建议之前，不，我不希望使用其他方法来删除空格（HTML cmets，将结束标记的最后部分移动到下一行等），因为它们看起来很丑而且我希望我的代码看起来像我的页面一样美观。

【问题讨论】：

您没有误解> 选择器。问题在于继承。某些属性由元素的后代继承，即使您确保仅使用 > 将属性应用于该元素。您的问题的解决方案取决于正在使用的可继承属性。
好吧，因为我想删除元素之间的空白，我正在设置 font-size 属性。我唯一的问题是标题元素 h1 到 h6 发生了什么。我希望它们保持默认字体大小，但它们从父元素继承属性。我目前在 * 上将 font-size 设置为 small，但这会使 h1 到 h6 的大小与其他所有内容相同。

标签： html css css-selectors

【解决方案1】：

首先：我不确定这是否有效并且现在无法彻底测试。这应该是一个评论，但我缺乏这样做的声誉。对不起。

问题在于字体大小是从它的父级继承的属性之一，并且像“small”这样的值不会设置绝对大小，而是相对于继承的大小。所以我会尝试在你的主层之后立即重置大小，使用绝对值而不是相对值

body>main>*{font-size:18px;}

重要的部分显然没有使用相对大小，但是，我不知道这如何适应用户指定的默认字体大小。此外，您必须确保任何具有非中等字体大小的文本（因此在您的情况下，任何和所有文本）至少是 main 的孙子，因为所有直接子代的字体大小都将被覆盖.

希望这会对您有所帮助；体重

【讨论】：

恐怕还是不能解决丢失默认h1-h6尺寸的问题。否则，我可以只为 * 使用 'small' 的字体大小，为 body>main 使用 0。这是我无法解决的讨厌的继承问题。
您已经用 '*{font-size:small}' 覆盖了所有默认字体大小。您可以尝试添加 :not() 选择器，但是，对几个异常（ :not(h1,h2,h3,h4,h5,h6) ）的支持远非稳定。一般的共识是，不要通过 * 选择，而是使用逗号分隔的所有要设置样式的元素的列表（白名单而不是黑名单）。这也将确保您在将来添加新类型时不会意外设置元素样式。