什麼是CSS特異性及其工作方式？

2021-10-07 11:27:00 字數 3097 閱讀 4028

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

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

本教程是我們的「 學習css：完整指南」的一部分— 將其簽出並獲得書籤！

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

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

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

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

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

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

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

id選擇器是佇列中的下乙個。 這些是使用元素id定位到元素的選擇器。 id是唯一的； 乙個元素只能有乙個id，並且該id在html文件中只能使用一次。

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

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

web design tutorial


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



this is an element selector


this is a paragraph
這些選擇器在css特異性層次結構中排名最低。

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

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

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



.hello-header 


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

與三個元素選擇器：

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

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

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

.hello-header 


.hello-header
大膽猜測。

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

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

h1 


h1::first-line
在這種情況下，應用於元素的樣式是最後一種樣式。

如果您有這樣html**：

具有以下樣式規則： 

h1#hello-header 


h1[id=hello-header]
您應該知道，第乙個將覆蓋最後乙個，如下所示。

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

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

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

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

使我們的宣告看起來像這樣會改變整個遊戲。 

h1#hello-header 


h1[id=hello-header] 


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

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

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

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

接下來，如果您遇到樣式衝突的問題，請不要拉扯頭髮！ 冷靜一下，記住從id ， 類，屬性和偽類選擇器到元素和偽元素選擇器的

內聯樣式開始的特異性層次結構。

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

翻譯自:

css選擇器特異性計算

翻譯自w3c 中的一段 是關於css選擇器優先順序的 計算乙個選擇器的特異性 選擇器的特異性計算如下 1.計算選擇器中id選擇器的數量 a 2.計算選擇器中class選擇器，屬性選擇器和偽類選擇器的數量 b 3.計算型別選擇器和偽元素選擇器的數量 c 4.忽視通用選擇器 連線三個數字a b c就是特...

確定RNA seq鏈特異性

當需要確定鏈特異性時，可如下操作，需要安裝bedops,rseqc兩個程式。安裝bedops,rseqc conda install bedops conda install rseqc 將比對過程中使用的gtf檔案轉為12列的bed檔案 在bedops中有gtf2bed可以將gft轉換為12列的b...

CSS選擇器優先順序（特異性）

1 行內樣式 important 2 id選擇器 id3 class 屬性 偽類選擇器 title,input type text hover4 型別和偽元素選擇器 div,before 0,0,0,0 行內樣式，id選擇器，class 屬性 偽類選擇器 型別 偽元素 權重相同，定義靠後優先 con...