Question

我不明白为什么下面最里面的嵌套div与#smaller-size的大小不同。它是一个直接的后代。是因为全局*样式更具体吗？这真是我的页面。我错过了什么？谢谢！

* { font-size: 15pt; }
#smaller-size { font-size: 0.8em; }

<div>
    This should be the size specified by * (and it is)
    <div id="smaller-size">
        This should be the smaller size (and it is)
        <div>
            This is nested in #smaller-size, so it should also be smaller (but it's not!)
        </div>
    </div>
</div>

Answer 1

“*”选择器的特异性是最低的（0,0,0,0），但它适用于每个适用的元素，因此每个div都将是：

* { font-size: 15pt; }

当您使用#selector设置新的特异性时：

#smaller-size { font-size: 0.8em; }

只有具有相应id选择器的元素将具有比其余元素更高的特异性，受*影响，它们都是*。在此特定元素（0,1,0,0）中创建特定值。此ID仅适用于该特定元素。

例如，如果您坚持以下内容：

#smaller-size>div { font-size: 0.2em }

然后，所有在较小尺寸的id下的div将比受* *

影响的那些具有更高的特异性

创造类似的东西：

<div> -- specificity (0,0,0,0) = 0
  <div id="smaller-size"> -- specificity (0,1,0,0) = 100
    <div> -- specificity (0,1,0,1) = 101
    </div>
  </div>
</div>

有了这个逻辑：

* { font-size: 15pt; }
#smaller-size { font-size: 0.8em; }
#smaller-size>div { font-size: 0.7em; }
#smaller-size>.smaller { font-size: 0.6em; }

<div>
    specificity of this element (0,0,0,0) = 0
    <div id="smaller-size">
        specificity of this element (0,1,0,0) = 100
        <div>
            specificity of this element (0,1,0,1) = 101
        </div>
        <div class="smaller">
            specificity of this element (0,1,1,1) = 111
        </div>
        <div class="smaller" style="font-size: 0.5em;">
            specificity of this element (1,1,1,1) = 1111
        </div>
        <p>
            specificity of this element (0,0,0,0) = 0
        </p>
    </div>
</div>

Here是一篇非常好的文章，解释了特异性如何发挥作用。

Answer 2

是的，这是因为您的全球*风格。您的嵌套div没有class或id，浏览器会尝试查找第一个适用的样式元素，它是*。

Answer 3

是因为全局*风格更具体吗？

没有。这是因为它匹配元素而#smaller-size没有。

特异性仅在两个选择器匹配相同元素时才有意义。

如果您没有* { font-size: 15pt; }，则内部div将具有font-size的默认值，这将是100%的行（即与父元素大小相同）。

您可能只需在body上设置字体大小，然后让继承处理其余内容。虽然有一些问题：

表单控件不要默认为100％，因此您可能希望明确设置input元素的大小等
在Quirks模式下，默认情况下字体可能不会继承到表中，因此请确保您具有触发标准模式的Doctype
pt是专为物理媒体设计的单元。它无法在屏幕上准确呈现。考虑使用不同的单位（如像素）。

嵌套div没有被赋予父级的样式，而是使用*样式而不是

3 个答案: