大多數(shù)開發(fā)人員無法通過這個(gè)簡(jiǎn)單的CSS面試問題(CSS特異性)
終于上線啦，有好多好玩的模型，包括最近很火的瞬息宇宙
給定以下HTML和CSS代碼，你知道 test文本的顏色會(huì)是什么嗎？
<body>
<div class="hello">
<p class="abc">test</p>
</div>
</body>p.abc {
color: purple;
}
.hello p {
color: red;
}
.abc {
color: blue;
}
p {
color: green;
}花點(diǎn)時(shí)間仔細(xì)思考一下
如果你猜測(cè)的顏色是紅色，那么你是正確的！你也對(duì)CSS特異性有著扎實(shí)的理解。
事例地址：https://codepen.io/ambroseliew/pen/jOpzXpj
為什么？
如果你沒有找到正確答案或者不明白為什么文本顏色是紅色的，你可以查看這篇其他文章，在這里我詳細(xì)講解了CSS的特異性。
https://medium.com/@ambroseliew1998/stop-writing-important-in-your-css-code-and-do-this-instead-62171f86016f
理解這個(gè)概念很重要，因?yàn)槿绻闶且粋€(gè)網(wǎng)頁(yè)開發(fā)者，尤其是前端開發(fā)者，這樣的概念經(jīng)常被使用。
攻略指南
但更進(jìn)一步解釋，應(yīng)用紫色的CSS特異性和應(yīng)用紅色的另一條規(guī)則，它們的特異性都是0-0-0-1-1。這是因?yàn)樗鼈兌加?個(gè)類選擇器和1個(gè)類型選擇器。
同時(shí)，對(duì)于應(yīng)用藍(lán)色的規(guī)則，其CSS特異性為0-0-0-1-0，因?yàn)樗挥幸粋€(gè)類選擇器。而應(yīng)用綠色的規(guī)則的CSS特異性為0-0-0-0-1，因?yàn)樗挥幸粋€(gè)類型選擇器。
因此，具有最高CSS特異性值的規(guī)則是應(yīng)用紫色的規(guī)則和應(yīng)用紅色的其他規(guī)則。
但是有兩個(gè)具有相同CSS特異性值的CSS規(guī)則！我們?nèi)绾沃缿?yīng)該應(yīng)用哪個(gè)？
這就是“層疊”在層疊樣式表（CSS）中發(fā)揮作用的地方。這意味著最后應(yīng)用的規(guī)則（即位于底部的規(guī)則）將被應(yīng)用。在這種情況下，將應(yīng)用應(yīng)用紅色的規(guī)則。
我們甚至可以進(jìn)一步添加另一個(gè)CSS規(guī)則到列表中。
.hello.hello {
color: pink;
}是的，你可以堆疊類選擇器（和ID選擇器）來增加特異性。因此，這條規(guī)則的CSS特異性將為0-0-0-2-0。這個(gè)值肯定比迄今為止的所有其他規(guī)則都要高。
然而，如果你將這個(gè)CSS規(guī)則添加到目前在codepen中已有的CSS代碼中，你會(huì)發(fā)現(xiàn)文本的顏色仍然是紅色！為什么會(huì)這樣呢？
這是因?yàn)橹苯俞槍?duì)元素的規(guī)則總是優(yōu)先于針對(duì)父元素的規(guī)則（也稱為繼承樣式）。
因此，在這種情況下，由于這個(gè)CSS規(guī)則是針對(duì)父元素而不是實(shí)際的p 標(biāo)簽本身，它會(huì)被其他更具體的CSS規(guī)則覆蓋。是的，應(yīng)用綠色的CSS規(guī)則也會(huì)覆蓋這個(gè)粉色。
