瞭解CSS選擇器優先級/特異性

我想了解CSS選擇器如何處理屬性衝突，如何選擇屬性而不是另一個屬性？瞭解CSS選擇器優先級/特異性

div { 
     background-color:red; 
} 
div.my_class { 
     background-color:black; 
} 
div#my_id { 
     background-color:blue; 
} 
body div { 
     background-color:green; 
} 
body > div { 
     background-color:orange; 
} 
body > div#my_id { 
     background-color:white; 
} 

<html> 
     <body> 
      <div id="my_id" class="my_class">hello</div> 
     </body> 
</html>

對於某些人來說，這可能是顯而易見的，但不適合我！

是否存在一些指南或鏈接，我終於可以理解選擇器優先級如何工作？

來源

2010-11-01 vitto

+10

http://www.w3.org/TR/CSS2/cascade.html#specificity – drudge 2010-11-01 19:28:22

我就扔在一個鏈接到CSS 2.1規範本身，以及瀏覽器應該如何計算特異性：

CSS 2.1 Section 6.4.3：

如下選擇器的特殊性計算公式爲：

如果聲明來自於'樣式'屬性而不是帶有選擇器的規則，則計數1否則爲0（= a）（在HTML中，ele的值ment的「樣式」屬性是樣式表規則。這些規則沒有選擇器，因此a = 1，b = 0，c = 0和d = 0）。

計數選擇器中ID屬性的數量（= b）

計數其他屬性和選擇器中的僞類（= c）

計算選擇器中元素名稱和僞元素的數量（= d）

該特性僅基於選擇器的形式。特別是，即使id屬性被定義爲「ID」，也將「[id = p33]」形式的選擇器計爲屬性選擇符（a = 0，b = 0，c = 1，d = 0）「在源文檔的DTD中。

將四個數字a-b-c-d（在具有大基數的數字系統中）連接給出特異性。

如果特異性是相等的，那麼CSS 2.1 Section 6.4.1進場：

最後，排序順序指定：如果兩個聲明具有相同的重量，來源和特異性，後者指定勝。導入樣式表中的聲明被認爲是在樣式表本身的任何聲明之前。

請注意，這是說什麼時候風格被定義，而不是當它被使用。如果類.a和.b具有相同的特異性，則樣式表中的最後定義爲獲勝。根據.a和.b的定義順序，<p class="a b">...</p>和<p class="b a">...</p>的樣式相同。

來源

2010-11-01 19:34:35 Benn

到目前爲止的最佳解釋：[鏈接]（http://css-tricks.com/specifics-on-css-specificity）當您向下滾動到「計算CSS特定性值」部分時，它開始變得非常有趣。 – 2014-07-10 15:35:14

但是，當兩個特異性值相同時會發生什麼？它是由哪個規則首先定義的？ – Boom 2016-02-02 21:12:45

這包含在https://www.w3.org/TR/CSS2/cascade.html#cascading-order中，特別是規則4，它在特定之後適用。我會編輯答案，以包括打破平局。 – Benn 2016-02-05 16:30:38

你感興趣的是specificity。

Firebug是一個很好的工具來幫助檢查這個。但其他瀏覽器也內置了用於檢查應用CSS規則的工具。

來源

2010-11-01 19:29:03

Firebug是否有特定的（無雙關語意圖的）工具來分析特異性？不僅僅是違規規則的透視觀點？ – 2010-11-01 19:45:38

@Pekka，不，不。儘管如此，仍然是這些類型的優秀工具。 – 2010-11-01 23:52:26

@Pekka在HTML選項卡的右側，計算（？）選項卡（樣式和外觀之間）具有覆蓋指令的另一個透視視圖。比Style更有用，你可能指的是當你只有一個屬性感興趣時。 – FelipeAls 2013-03-24 21:36:25

元

類選擇

ID選擇

內聯樣式

！重要

爲了，1是最低的特異性，5爲最高。 https://youtu.be/NqDb9GfMXuo會顯示詳細資料來演示它。

來源

2016-03-29 00:33:17

爲什麼這是downvoted？ – AlexGH 2017-02-24 17:41:27

不確定，對我來說（如果準確的話）它是最簡潔的。我有東西要做！ – 2017-05-03 15:52:21

您可以參考這裏的完整的答案Mozilla documentation

開始從最具體： ID選擇>類選擇>類型選擇（正常PH1，標籤等..）重要的總是獲勝，但這被認爲是不好的做法。參見上面的鏈接。

的最好辦法，就是與它的實驗：

<!-- start class vs id --> 
    <p class="class1" id="id1">.class vs #id: The winner is #id</p> 

    <!-- upper vs bottom --> 
    <p id="id2">the very bottom is the winner</p> 

    <!--most specific is the winner --> 
    <p id="id3">the most specific</p> 

    <!--pseudo and target selector --> 
    <h3>pseudo vs type selector</h3> 

    <!-- !important is more important! --> 
    <h1 id="very-specific">HI! I am very important!</h1> 
    </body>

CSS：

#id1{ 
    color: blue; 
} 

.class1{ 
    color: red; 
} 

#id2{ 
    color: yellow; 
} 

#id2{ 
    color : green; 
} 

body p#id3{ 
    color :orange; 
} 

body p{ 
    color : purple; 
} 

body{ 
    color : black; 
} 

h3::first-letter { 
    color: #ff0000; 

} 

h3{ 
    color: CornflowerBlue ; 
} 

h1{ 
    color: gray !important; 
} 

body h1#very-specific{ 
    color: red; 
}

Here's測試用例。

來源

2017-02-19 08:37:52

瞭解CSS選擇器優先級/特異性

回答

相關問題