CSS特異性

了解CSS特殊性的含義及其重要性

當一個元素受到影響相同屬性的具有不同選擇器的多個規則作為目標時，會發生什麼？

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

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

我們可以有

.dog-name {
  color: yellow;
}

另一個針對的規則p，它將顏色設置為另一個值：

p {
  color: red;
}

另一個針對的規則p.dog-name。哪個規則將優先於其他規則，為什麼？

輸入特異性。更具體的規則將獲勝。如果兩個或多個規則具有同樣的特異性，最後出現的那個勝。

有時，實踐中更具體的內容會使初學者有些困惑。我想說的是，那些不經常查看或忽略這些規則的專家也會感到困惑。

如何計算特異性

特異性是使用慣例計算的。

我們有4個插槽，每個插槽都從0開始：0 0 0 0。最左邊的插槽最重要，最右邊的插槽最不重要。

就像它適用於十進制系統中的數字一樣：1 0 0 0高於0 1 0 0。

Slot 1

第一個插槽，最右邊的插槽，最不重要。

當我們有一個類型選擇器。類型是標籤名稱。如果規則中有多個類型選擇器，則相應地增加此插槽中存儲的值。

例子：

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 */

Slot 2

第二個插槽將增加3件事：

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

每當規則滿足其中一個條件時，我們就會從右邊開始增加第二列的值。

例子：

.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */

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

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

類的一個不錯的技巧是，您可以重複相同的類並增加特異性。例如：

.name {
} /* 0 0 1 0 */
.name.name {
} /* 0 0 2 0 */
.name.name.name {
} /* 0 0 3 0 */

Slot 3

廣告位3在CSS文件中包含可能影響CSS特異性的最重要的內容：id。

每個元素都可以有一個id屬性已分配，我們可以在樣式表中使用該屬性來定位元素。

例子：

#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */

Slot 4

廣告位4受內聯樣式的影響。任何內聯樣式將優先於外部CSS文件或內部CSS文件中定義的任何規則。style標籤在頁面標題中。

例子：

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

即使CSS中的其他任何規則定義了顏色，也將應用此內聯樣式規則。除了一種情況-如果!important is used, which fills the slot 5.

重要性

規則的結尾是否具體無所謂!important：

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

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

新增中!important根據特定性規則，CSS規則中的規則將使該規則比其他任何規則都更加重要。另一個規則可以優先的唯一方法是擁有!important同樣，並且在其他不太重要的廣告位中具有更高的特異性。

尖端

通常，您應該使用所需的特異性，但不能更多。這樣，您可以精心製作其他選擇器以覆蓋之前的規則設置的規則，而不會發瘋。

!importantCSS為我們提供了一個備受爭議的工具。許多CSS專家主張不要使用它。我發現自己正在使用它，尤其是在嘗試某些樣式時，並且CSS規則具有太多的特殊性，因此我需要使用!important使瀏覽器應用我的新CSS。

但是一般來說!important在您的CSS文件中應該沒有位置。

使用id樣式CSS的屬性也有很多爭議，因為它具有很高的特異性。一個好的替代方法是使用類，因為它們的特異性較低，因此更易於使用，並且功能更強大（您可以為一個元素使用多個類，並且一個類可以多次重用）。

計算特異性的工具

您可以使用該網站https://specificity.keegan.st/自動為您執行特異性計算。

這特別有用，特別是在您嘗試解決問題時，因為它可能是一個不錯的反饋工具。

免費下載我的CSS手冊