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

当然，这在一个简单的页面上很好，字体是相同的。但是，对于不同大小的字体和标题标签，这不起作用。

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

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

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

Answer 1

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

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

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

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

希望这会对你有所帮助;体重

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

1 个答案: