好的，有很多文章在讨论 CSS 中的级联优先级，我最近阅读了this one，我发现了一些要点：-
.container img 规则将覆盖 img 规则看看这段代码：-
<div id="flowerContainer" >
<img id="flower" src="..." />
</div>
尝试应用以下规则：-
#flowerContainer img{width:500px;}
#flower {width:300px}
根据第二条规则，应该应用 #flower 宽度规则，但应用了 #flowerContainer img，为什么？
【问题讨论】：
标签： css
#flowerContainer img 的特异性高于#flower 的特异性，这就是该规则在此处应用的原因。
这是因为其中一个只有一个 ID 选择器，而另一个同时有一个 ID 选择器和一个类型选择器。
在 MDN 上阅读有关特异性的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
【讨论】：
首先您应该阅读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) 更具体
【讨论】：
Here 是关于 CSS 如何计算优先选择器的官方文档。
选择器的特异性计算如下：
- 统计选择器中 ID 属性的数量 (= a)
- 统计选择器中其他属性和伪类的数量 (= b)
- 计算选择器中元素名称的数量 (= c) 忽略伪元素。
连接三个数字 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) 更具体，因此它们将优先。
【讨论】：