仅将样式应用于选定的元素，而不影响儿童元素

这非常简单，所以我确信我只是缺少一些明显的东西。仅将样式应用于选定的元素，而不影响儿童元素

说我有这个例子代码：

<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注释，将结束标记的最后部分移动到下一行等），因为它们看起来很丑我更喜欢我的代码看起来像我的页面一样。

来源

2014-02-15 Hiigaran

你不会误解'>'选择器。问题在于继承。一些属性由元素的后代继承，即使您确保只使用'>'将属性应用于该元素。您的问题的解决方案取决于正在使用的可继承属性。 – BoltClock

那么，由于我想如何删除我的元素之间的空白，我设置了font-size属性。我唯一的问题是头元素h1到h6发生了什么。我希望他们保持其默认字体大小，但他们从父元素继承属性。我目前在*上将font-size设置为较小，但是这会使h1与h6的大小相同。 – Hiigaran

首先：我不完全确定它是否有效，现在还不能完全测试。这应该是一个评论，但我缺乏这样做的声誉。抱歉。

问题是，字体大小是从它的父项继承的属性之一，像“小”这样的值不设置绝对大小，但相对于继承的大小。所以我会尝试你的主层后，大小正确复位，使用绝对值，而不是一个相对

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

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

希望这会帮助你; bw

来源

2014-02-16 23:56:34 Tobl

恐怕它仍然不能解决丢失默认h1-h6尺寸的问题。否则，我可能只是使用'small'的字体大小来表示*，0表示body> main。这是我无法解决的棘手的继承问题。 – Hiigaran

您已经用'* {font-size：small}'覆盖了所有的默认字体大小。您可以尝试添加：not（）选择器，但是，对几个例外（：not（h1，h2，h3，h4，h5，h6））的支持远不稳定。一般意见是，不要选择*，而是使用逗号分隔的所有要设置样式的元素列表（白名单而不是黑名单）。这也将确保您在未来添加新类型时不会意外地设置元素的样式。 – Tobl

仅将样式应用于选定的元素，而不影响儿童元素

回答

相关问题