終于上線啦，有好多好玩的模型，包括最近很火的瞬息宇宙

給定以下HTML和CSS代碼，你知道 test文本的顏色會是什么嗎？

    

        
test
    

p.abc {
    color: purple;
}
.hello p {
    color: red;
}
.abc {
    color: blue;
}
p {
    color: green;
}

花點時間仔細思考一下

如果你猜測的顏色是紅色，那么你是正確的！你也對CSS特異性有著扎實的理解。

事例地址：https://codepen.io/ambroseliew/pen/jOpzXpj

為什么？

如果你沒有找到正確答案或者不明白為什么文本顏色是紅色的，你可以查看這篇其他文章，在這里我詳細講解了CSS的特異性。

https://medium.com/@ambroseliew1998/stop-writing-important-in-your-css-code-and-do-this-instead-62171f86016f

理解這個概念很重要，因為如果你是一個網(wǎng)頁開發(fā)者，尤其是前端開發(fā)者，這樣的概念經(jīng)常被使用。

攻略指南

但更進一步解釋，應用紫色的CSS特異性和應用紅色的另一條規(guī)則，它們的特異性都是0-0-0-1-1。這是因為它們都有1個類選擇器和1個類型選擇器。

同時，對于應用藍色的規(guī)則，其CSS特異性為0-0-0-1-0，因為它只有一個類選擇器。而應用綠色的規(guī)則的CSS特異性為0-0-0-0-1，因為它只有一個類型選擇器。

因此，具有最高CSS特異性值的規(guī)則是應用紫色的規(guī)則和應用紅色的其他規(guī)則。

但是有兩個具有相同CSS特異性值的CSS規(guī)則！我們?nèi)绾沃缿搼媚膫€？

這就是“層疊”在層疊樣式表（CSS）中發(fā)揮作用的地方。這意味著最后應用的規(guī)則（即位于底部的規(guī)則）將被應用。在這種情況下，將應用應用紅色的規(guī)則。

我們甚至可以進一步添加另一個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 標簽本身，它會被其他更具體的CSS規(guī)則覆蓋。是的，應用綠色的CSS規(guī)則也會覆蓋這個粉色。

分享標題：大多數(shù)開發(fā)人員無法通過這個簡單的CSS面試問題(CSS特異性)
分享鏈接：http://uogjgqi.cn/article/cccpeog.html