嵌套的div没有被父母的风格，使用*样式代替

我不明白为什么最下面的嵌套div不是与#smaller-size大小相同。这是一个直接的后代。这是因为全球*风格更具体吗？这真的是对我的页面进行直觉冲突。我错过了什么？谢谢！嵌套的div没有被父母的风格，使用*样式代替

* { 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>

来源

2016-12-07 Matt Powell

有什么理由要使用'*'选择器吗？为什么不定义身体的15pt大小？然后'.smaller-size'内的所有内容将继承0.8em –

如果是新项目，请重新考虑如何定义初始字体大小。如果项目太远了（遗留项目），那么试试这个：https://jsfiddle.net/egdsfwvL/ – seemly

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

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

只有当两个选择器匹配相同的元素时，特异性才起作用。

如果你没有* { font-size: 15pt; }，则内DIV会对font-size的默认值，这将是沿着100%（即大小相同的父元素）线的东西。

你应该设置字体大小在body并让继承采取其余的情况。虽然有几个陷阱：

表单控件不默认为100％，所以你可能需要明确设置input元素等
怪癖模式的字体大小可能不会继承到由表默认，所以确保你有一个触发标准模式的文档类型
pt是一个为物理媒体设计的单元。它不能在屏幕上准确渲染。考虑使用不同的单位（像素）。

来源

2016-12-07 16:39:58 Quentin

优秀的解释。我没有完全理解默认值的概念，以及没有直接应用样式的元素简单地采用这些值的想法。在字体大小的情况下，知道默认值是'100％'（我一直认为它是继承）是很有用的。 –

是的，那是因为你的全球*风格。嵌套的div没有class或id，浏览器试图找到第一个适用的样式元素，它是*。

来源

2016-12-07 16:39:04

它不使用第一个适用的，它使用最具体的一个。在这种情况下，只有一个匹配。 – Quentin

@Quentin是的，你说得对，我用错了词。 –

的“*”选择的特异性可能是最低的（0,0,0,0），但它适用于适用的每一个元素，所以每格为：

* { font-size: 15pt; }

通过您正在使用＃选择设置新的特异性时间：

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

只有具有相应的ID选择的元素将有比其他人，受*，这些都是他们的高特异性。在此特定元素（0,1,0,0）中创建特定值。此标识仅适用于该特定元素。

例如，如果你stablish类似：

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

然后根据编号较小尺寸的所有元素的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是一个很好的文章，解释的特异性是如何工作的。

来源

2016-12-07 17:21:19 Sergio

嵌套的div没有被父母的风格，使用*样式代替

回答

相关问题