想不通，爲什麼我們的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特異性不工作

回答

相關問題