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