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