css - 基本的CSS特异性层次结构

我认为我有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！有人可以解释一下吗？

最佳答案

特异性是关于针对同一元素的不同规则的解决方案。但是在这里，一个为ul（R3）设置，另一个（R2）为li设置，因此li在颜色上优先于您认为是一致的父规则。

从MDN：


  特异性仅适用于多个目标相同的元素
  声明。

关于css - 基本的CSS特异性层次结构，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41859510/