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）和li的另一个（R2），所以li的颜色优先于你认为重合的父规则。

来自MDN：

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

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*/

结果将完全相同。

对于您的问题， near 问题，<ul>的样式将永远丢失为<li>的样式（样式<li>时元件）。

基本CSS特异性层次结构

2 个答案: