为什么css应用#flowerContainer img规则而不是应用#flower规则

Question

好的，有很多文章都在谈论CSS中的级联优先级，我最近阅读this one并且有一些观点我认为： -

1. id比分类和类更多的重量比标记
2. id权重与内联样式相同，但由于内联后来它会赢得覆盖规则
3. 选择器权重越多，选择器权重越少，.container img规则将覆盖img规则

看看这段代码： -

<div id="flowerContainer" >
     <img id="flower" src="..." />
</div>

尝试应用以下规则： -

#flowerContainer img{width:500px;}
#flower {width:300px}

根据第二条规则，应该应用#flower宽度规则，但应用#flowerContainer img代替原因？

Answer 1

#flowerContainer img的特异性高于#flower的特异性，这就是为什么应用该规则的原因。

这是因为其中一个只有一个ID选择器，而另一个同时具有ID选择器和类型选择器。

在MDN上阅读有关特异性的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

首先，您应该了解CSS如何计算特异性here。

  

选择器的特异性计算如下：

     

  
• 计算选择器中的ID属性数量（= a）
  
• 计算选择器（= b）
中其他属性和伪类的数量   
• 计算选择器中元素名称的数量（= c）   忽略伪元素。
  

     

连接三个数字a-b-c（在具有大碱基的数字系统中）给出了特异性。

所以，在

的情况下

#flowerContainer img { width:500px; } /* a=1,b=0,c=1 (a-b-c = 101) */

#flower { width:300px; } /* a=1,b=0,c=0 (a-b-c = 100) */

所以#flowerContainer img（101）比#flower（100）

更具体

Answer 3

Here是关于CSS如何计算优先选择器的官方文档。

  

选择器的特异性计算如下：

     

  
• 计算选择器中的ID属性数量（= a）
  
• 计算选择器（= b）
中其他属性和伪类的数量   
• 计算选择器中元素名称的数量（= c）ignore pseudo-elements。
  

     

连接三个数字a-b-c（在具有大数字的数字系统中）   base）给出了特异性。

     

一些例子：

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */ 
LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

#id element规则（101）比#id规则（100）更具体，因此它们优先。