/

CSS 具體性

CSS 具體性

了解 CSS 具體性的含義以及其重要性

當一個元素被多個具有不同選擇器的規則所影響時，會發生什麼情況？這些規則都影響相同的屬性。

例如，讓我們來談一談這個元素：

1
<p class="dog-name">Roger</p>

我們可以有以下規則：

1
2
3
.dog-name {
 color: yellow;
}

還有另一個以 p 為選擇器的規則，它將顏色設置為另一個值：

1
2
3
p {
 color: red;
}

還有一個以 p.dog-name 為選擇器的規則。哪個規則將優先於其他規則，為什麼？

這時要介紹一下具體性。最具體的規則將優先選擇。如果兩個或多個規則具有相同的具體性，則最後出現的規則將優先選擇。

對於初學者來說，實際上什麼是更具體的有點困惑。我想對於不常看這些規則的專家來說也是困惑的，或者只是忽視了它們。

如何計算具體性

具體性是使用一種約定方式來計算的。

我們有 4 個插槽，每個插槽的初始值為 0: 0 0 0 0。最左邊的插槽最重要，最右邊的插槽最不重要。

就像十進制數字一樣：1 0 0 0 比 0 1 0 0 要大。

插槽 1

插槽 1 是最不重要的。

當我們有一個 類型選擇器 時，我們會增加這個值。類型就是標籤名稱。如果在規則中有多個類型選擇器，則按照該插槽中存儲的值進行遞增。

例子：

1
2
3
4
5
6
7
8
9
10
p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */

插槽 2

第二個插槽的值增加 3 個方面：

  • 類選擇器
  • 偽類選擇器
  • 屬性選擇器

每次規則遇到其中一個時，我們都會增加右邊第二列的值。

例子：

1
2
3
4
5
6
7
8
.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */

當然，第 2 插槽的選擇器可以與第 1 插槽的選擇器結合使用：

1
2
3
4
5
6
div .name {
} /* 0 0 1 1 */
a[href$='.pdf'] {
} /* 0 0 1 1 */
.pictures img:hover {
} /* 0 0 2 1 */

類有一個不錯的技巧，你可以重複使用同一個類，增加具體性。例如：

1
2
3
4
5
6
.name {
} /* 0 0 1 0 */
.name.name {
} /* 0 0 2 0 */
.name.name.name {
} /* 0 0 3 0 */

插槽 3

插槽 3 中存儲的是在 CSS 文件中對你的具體性具有重大影響的 id。

每個元素都可以有一個分配的 id 屬性，我們可以在樣式表中使用它來針對元素。

例子：

1
2
3
4
5
6
#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */

插槽 4

插槽 4 受行內樣式的影響。任何行內樣式都優先於外部 CSS 文件中定義的任何規則，或者在頁面標頭中的 style 標籤內部定義的規則。

例子：

1
<p style="color: red">Test</p> /* 1 0 0 0 */

即使 CSS 中的任何其他規則定義了顏色，這個行內樣式規則也會被應用。除非使用了 !important，這將填充插槽 5。

重要性

具體性在規則以 !important 結尾時不重要：

1
2
3
p {
 font-size: 20px !important;
}

該規則將優先於具體性更高的任何規則。

在 CSS 規則中添加 !important 會使該規則比任何其他規則更重要，根據具體性規則，只有另一個規則也使用了 !important，並且在其他不重要的插槽中具有更高的具體性時，其才能優先選擇。

技巧

一般來說，您應該使用所需的具體性，但不要過度使用。這樣，您可以創建其他選擇器來覆蓋前面規則設置的規則，而不會讓自己變得瘋狂。

!important 是 CSS 提供給我們的一個備受爭議的工具。許多 CSS 專家反對使用它。當嘗試應用一些樣式並且 CSS 規則具有很高的具體性，使得我需要使用 !important 來讓瀏覽器應用我的新 CSS 時，我會使用它。

但通常情況下，!important 應該不會出現在您的 CSS 文件中。

用於計算具體性的工具

您可以使用此網站 https://specificity.keegan.st/ 自動執行具體性計算。

這在您試圖弄清楚問題時非常有用，因為它可以作為一種良好的反饋工具。

tags: [“CSS”, “specificity”, “selectors”, “!important”]