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

Question

好的，有很多文章讨论CSS中的级联优先级，我最近读过这一个，我想出了一些要点：-

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

这里是关于CSS如何计算哪个选择器优先的正式文档。

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

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

比较三个数字a(在一个大基数的数字系统中)的特性。

下面是一些例子：

* {} /* a=0 b=0 c=0 ->特异性=0 */ LI {} /* a=0 b=0 c=1 ->专用性=1 */ UL LI {} a=0 b=0 c=2 ->专用性=2 */ UL OL+LI {} /* c=2 ->特异性特异性=3 */ +en23 en25 en27#特异性= 11 */ UL OL {} en29 29#a=0 b=1 c=3 ->特异性= 13 */ LI.red.level {} /* a=0 b=2 c=1 ->特异性= 21 */ #x34y {} /* b=0 c=0 ->特异性= 100 */

#id element规则(101)比#id规则(100)更具体，因此它们将优先。

Answer 2

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

这是因为它们中的一个只有一个ID选择器，而另一个则同时有一个ID选择器和一个类型选择器。

阅读更多关于专一性的MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 3

首先，您应该阅读CSS是如何计算特异性这里的。

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

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

比较三个数字a(在一个大基数的数字系统中)的特性。

所以如果是，

#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)更具体。