使用CSS時，樣式沖突可能會給您帶來麻煩，尤其是當您不知道沖突的來源時。 本教程將使您對CSS的特性有深入的了解，這將有助于填補任何知識空白，從而最終不會使您擺脫沮喪。

注意 ：也許您是經驗豐富CSS專業人士？ 自CSS誕生以來，這是開發人員一直喜歡談論的話題，但是刷新您的記憶總是很有趣的！

您需要了解的有關CSS的一切

本教程是我們的“ 學習CSS：完整指南”的一部分— 將其簽出并獲得書簽！

什么是CSS特異性？

MDN很好地表達了它（一如既往）：

“特殊性是瀏覽器確定哪些CSS屬性值與某個元素最相關的方法，因此將被應用。”

這意味著CSS特定性是瀏覽器用來確定將哪些開發人員定義的樣式應用于特定元素的一組規則。 為了將樣式應用于特定元素，開發人員必須遵守規則，以便瀏覽器知道如何應用樣式。

當兩種或多種樣式針對特定元素時，具有最高特異性的樣式就是所應用的樣式。

了解CSS特殊性的層次結構

樣式的特異性取決于與其他沖突選擇器相比時選擇器的排名。 選擇器定義如何定位要在CSS中設置樣式的元素。 讓我們看一下從最高到最低的層次結構中的選擇器：

內聯樣式

這些是HTML文檔中定義的樣式，直接附加到要設置樣式的元素上。 例如：

<h3 style='color: red'>Hello World</h3>

這類樣式并不常用，因為它被認為是“分離關注點”并在外部樣式表中包含樣式的最佳實踐。 但是，在樣式層次結構中，內聯樣式排名最高。

ID選擇器

ID選擇器是隊列中的下一個。 這些是使用元素ID定位到元素的選擇器。 ID是唯一的； 一個元素只能有一個ID，并且該ID在HTML文檔中只能使用一次。

<h3 id="sub-header">Hello World</h3>

可以用內聯樣式覆蓋它們。

類，屬性和偽類

ID選擇器之后是類選擇器，屬性選擇器和偽類選擇器。 這是一些示例標記，顯示了每個對應CSS選擇器：

<!-- Class Selector --> <h3 class="hello-header">Hello World!</h3> <!-- .hello-header { color: blue } --><!-- Attribute Selector --> <a href="https://webdesign.tutsplus.com">Web Design Tutorial</a> <!-- a[href="http://webdesign.tutsplus.com"] { color: green } --><!-- Pseudo Class Selector --> <button>Delete</button> <!-- button:hover { background-color: blue } -->

元素和偽元素

元素選擇器允許您設置所選元素的樣式，而偽元素選擇器允許您設置所選元素的一部分的樣式。

<!-- Element selector --> <p>This is an element selector</p> <!-- p { color: red } --><!-- Pseudo-element selector --> <p>This is a paragraph</p> <!-- p::first-letter { color: green } -->

這些選擇器在CSS特異性層次結構中排名最低。

使用等級對CSS特異性進行評分

為了計算樣式的特殊性，我們將從每個等級的0開始。 然后，我們可以基于用于定位元素的選擇器來增加排名。 這是我們起點的外觀：

對于內聯樣式，我們將按以下方式對特異性進行評分：

在這種情況下，內聯樣式的得分（用最簡單的話）為1000 。 單個ID選擇器會將1添加到ID下方的框中，有效得分為0100 。 讓我們看一些更清楚的例子。

CSS專用規則和示例

類選擇器覆蓋多個元素選擇器

假設我們在HTML標記中有一個類似這樣的代碼段-嵌套在兩個div元素中的h1標題：

<div><div><h1 class="hello-header">Hello World!</h1></div> </div>

在我們CSS中，我們有以下兩種樣式，都針對相同的h1標題：

.hello-header {color: red }div > div > h1 {color: blue }

您認為將應用哪個？ 在這種情況下，我們有一個類選擇器：

與三個元素選擇器：

10個針對3個特異性點。 紅勝：

即使選擇器中包含更多元素，也會選擇使用類應用的樣式。

最后一條規則獲勝

當您使用完全相同的選擇器定位元素并使用不同的樣式時，會發生什么。 像下面的例子嗎？

<h1 class="hello-header">Hello World!</h1>.hello-header {color: blue }.hello-header {color: red }

大膽猜測。

較低的規則（最近處理的樣式規則）被視為“最接近元素”，因此在這種情況下是最具體的。 基于這一事實，它將應用于元素。 這也適用于所使用的選擇器具有相同CSS特異性的所有情況。

下面是一個示例，我們使用元素和偽元素選擇器-具有相同特異性的選擇器。

h1 {color: blue }h1::first-line {color: red }

在這種情況下，應用于元素的樣式是最后一種樣式。

ID選擇器覆蓋屬性選擇器

如果您有這樣HTML代碼：

<h1 id="hello-header">Hello World!</h1>

具有以下樣式規則：

h1#hello-header {color: green }h1[id=hello-header] {color: red }

您應該知道，第一個將覆蓋最后一個，如下所示。

這兩種樣式都以元素的ID為目標，但是第一種聲明使用ID選擇器（ 0100點），而第二種聲明通過屬性選擇器（ 0010點）。

內聯樣式更具特異性

如前所述，在元素本身的style屬性上定義的規則更具特異性，因為它們與要設置樣式的元素“最接近”。 這些樣式會覆蓋其他地方定義的樣式。

在這種情況下，紫色勝過上一示例中使用的紅色和綠色（ 1000對應 0100和0010 ）。

重要規則

您可能在想， !important規則適合什么地方？ !important關鍵字通常在最后一次嘗試中使用，以在所有其他方法均失敗時贏得CSS特異性戰爭。 讓我們通過在上面的最后一個示例中添加新規則來查看它的作用。

使我們的聲明看起來像這樣會改變整個游戲。

h1#hello-header {color: green }h1[id=hello-header] {color: red }h1 {color: blue !important }

如果沒有!important規則，則最后一種樣式（作為元素選擇器）排名最低，因此沒有機會。

重要的是要知道此規則與特異性無關，它只是覆蓋其他規則，其使用被認為是不良做法。

通用選擇器

通用選擇器將整個頁面上的所有內容作為目標。 這是通用選擇器的示例：

* {color: green; }

它們也可以用作子選擇器（例如： div * {} ）。 這些選擇器的特異性為0000 。

結論

接下來，如果您遇到樣式沖突的問題，請不要拉扯頭發！ 冷靜一下，記住從ID ， 類 ， 屬性和偽類選擇器到元素和偽元素選擇器的 內聯樣式開始的特異性層次結構。

而且，在編寫CSS時，請記住，您應該只根據具體情況而定，而不能過多。 通過對樣式規則過于具體化，您將在某些情況下更加難以應對這些樣式。

翻譯自: https://webdesign.tutsplus.com/tutorials/what-is-css-specificity--cms-34141

總結

以上是生活随笔為你收集整理的什么是CSS特异性及其工作方式？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。