想不通，为什么我们的CSS特异性不工作

所以我有以下代码：想不通，为什么我们的CSS特异性不工作

<ul class="shopping-list" id="awesome"> 
    <li><span>Milk</span></li> 
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> 
</ul> 
<style> 
    ul#awesome { 
     color: red; 
    } 
    ul.shopping-list li.favorite span { 
     color: blue; 
    } 
</style>

按照CSS规则的特异性（https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/）单词“香肠”应该是红色的，但它是出现蓝色。为什么？

的“UL＃真棒”特异性值= 0101 “ul.shopping列表li.favorite跨度” = 0023 的特异性值那么，为什么是这个词香肠还是蓝色的？根据我对样式声明的理解顺序，只有在每个声明的特殊性相同的情况下才是重要的，这种情况在这里不是这种情况。

来源

2016-03-08 Jeremy Waraksa

我认为'ul> li.favorite> span'比'ul＃id'更具体** **，不是吗？ – ochi

跨度从ul元素继承规则ul#awesome 。规则ul.shopping-list li.favorite span直接选择span元素。继承的规则具有0的特异性，因此任何选择元素的规则都会获胜。

您可以通过用“span”的基本元素选择器替换您的第二条规则来测试，并且您会发现在这种情况下牛奶和香肠都是蓝色的。

来源

2016-03-09 00:01:30

特异性可以通过优先级的4列表示：

直列= 1 | 0 | 0 | 0

ID = 0 | 1 | 0 | 0

类= 0 | 0 | 1 | 0

元件= 0 | 0 | 0 | 1

左到右，最高数优先。

所以你的情况，你有：

ul#awesome - 0 | 1 | 0 | 1 - 这是不直接加到字。

，你必须：

ul.shopping-list li.favorite span - 0 | 0 | 2 | 3 - 这是直接加到字。

所以0 | 0 | 2 | 3比0更具体| 1 | 0 | 1因此它是蓝色和而不是红色。

，如果你想让它红使用ul#awesome只需添加span

ul#awesome span { 
 
    color: red; 
 
} 
 
ul.shopping-list li.favorite span { 
 
    color: blue; 
 
}

<ul class="shopping-list" id="awesome"> 
 
    <li><span>Milk</span> 
 
    </li> 
 
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span> 
 
    </li> 
 
</ul>

来源

2016-03-08 23:57:59 dippas

ul > li.favorite > span是更具体的你可以测试你的CSS here

的特异性到sp一个Ñ比ul#id

外跨度的，外选择器将是更具体 - 看到它的行动

ul#awesome { 
 
    color: red; 
 
} 
 
ul.shopping-list li.favorite span { 
 
    color: blue; 
 
}

<ul class="shopping-list" id="awesome"> 
 
    <li><span>Milk</span> 
 
    </li> 
 
    <li class="favorite" id="must-buy">Red <span class="highlight">Sausage</span> 
 
    </li> 
 
</ul>

来源

2016-03-08 23:58:10 ochi

想不通，为什么我们的CSS特异性不工作

回答

相关问题