大多數開發人員無法通過這個簡單的CSS面試問題(CSS特異性)

作者：前端小智 2023-07-12 07:56:13

由于這個CSS規則是針對父元素而不是實際的??p?? 標簽本身，它會被其他更具體的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規則也會覆蓋這個粉色。

責任編輯：武曉燕來源：大遷世界