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

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

当然，在字体相同的简单页面上这很好。但是，由于到处都有不同大小的字体和 header 标签，因此效果不佳。

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

正确的做法是什么？

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

Answer 1

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

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

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

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

希望对您有所帮助；黑白