基本 CSS 特异性层次结构

Question

我想我得到了 CSS 特异性，但这个特殊情况让我很困惑：

li:first-child {color:  blue}                /* 3 */
div li {color:  red}                         /* 5 [R2] */
div.widget  ul#todo {color:  cyan}           /* 1 [R3] */

div > ul#todo .important {color:  green}     /* 1 */
ul li.postponed {color:  inherit}            /* 2 */
li + li + li {color:  magenta}               /* 4 */

<div  class="widget">
    <ul id="todo">
       <li>Buy  Bread</li>
       <li>Learn  Guitar </li>
       <li  class="important">Pay  Bills</li>
       <li  class="postponed">Wash  Car</li>
   </ul>
</div>

我在旁边写了选择器的特殊性。我虽然列表的颜色（每行）应该是
青色
青色
绿色
青色

但结果是
蓝色
红色
绿色
青色

我不明白具有较小特异性的 R2 如何可以覆盖具有更大特异性的 R3！有人可以解释一下吗？

Answer 1

特异性是关于相同元素的不同规则的解析。但是这里一个设置为 ul (R3)，另一个 (R2) 设置为 li，因此 li 在颜色上优先于您认为一致的父规则。

来自MDN：

Specificity only applies when the same element is targeted by multiple declarations.

Answer 2

首先……结果是blue, red, green, cyan，不是red, red, ...
避免使用复杂的选择器。请注意，如果将它们简化为：

li:first-child {color:  blue}                /* R1 - 3*/
li {color:  red}                             /* R2 - 5*/
#todo {color:  cyan}                         /* R3 - 1*/
.important {color:  green}                   /* R4 - 1*/
.postponed {color:  inherit}                 /* R5 - 2*/
li + li + li {color:  magenta}               /* R6 - 4*/

结果会完全一样。

对于你的问题，有一个接近的问题，<ul>的样式总是输给<li>的样式（当样式<li> 元素).

基本 CSS 特异性层次结构

Basic CSS specificity hierarchy

css

css-selectors

css-specificity