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

Question

这相当简单，所以我确信我遗漏了一些显而易见的东西。

假设我有以下示例代码：

<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;}。

当然，这在字体相同的简单页面上也没问题。然而，这里和那里有不同大小的字体和标题标签，这不能很好地工作。

我想我只是误解了>选择器的作用，但我想寻找的是一个选择器，它可以设置元素的样式，而不是将上述样式应用于子元素。在本例中，我想设置我的main元素的样式，但我不希望样式影响header或section元素。

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

在任何人建议之前，不，我不希望使用其他方法来删除空白(HTML注释，将结束标记的最后一部分移到下一行，等等)，因为它们看起来很丑陋，我更喜欢我的代码看起来像我的页面一样美观。

Answer 1

首先:我不是很确定这是否有效，现在也不能彻底测试。这应该是一个评论，但我没有这样做的声誉。抱歉的。

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

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

重要的部分显然不是使用相对大小，然而，我不知道这如何保持用户指定的默认字体大小。此外，您还必须确保任何具有非中等字体大小的文本(因此在您的示例中是任何和所有文本)至少是main的孙子文本，因为所有直接子代的字体大小都将被覆盖。

希望这能帮助你；bw