你應該知道的一些事情——CSS權重

 

本文由99根據Vitaly Friedman的《CSS Specificity: Things You Should Know 》所譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know，以及做者相關信息

做者：Vitaly Friedman

譯者：99

除了浮動以外，css權重問題是你要了解的，最複雜的一個概念之一。css每條規則權重的不一樣，是你所指望的效果，沒有經過css規則在元素上生效的主要緣由。爲了減小調試bug的時間，你須要瞭解瀏覽器是怎樣解析你的代碼的。爲了完成這個目標，你須要對權重是如何工做的，有一個清楚的認識。不少Css出現問題的場景，都是某處定義了一個更高權重的規則，致使此處規則不生效。

Css權重問題並不簡單，並且有不少或具體或抽象的理論來解釋這個問題。本文也將探討這個問題，我相信若是你喜歡星球大戰的話你確定會理解這些概念的~

咱們將會討論關於css權重的主要問題，包括例子，規則，原理，通用解決方案以及一些資源。

CSS權重：概述

1. 權重決定了哪一條規則會被瀏覽器應用在元素上。
2. 權重的不一樣，是你所指望的效果，沒有經過css規則在元素上生效的主要緣由。
3. 權重的級別劃分時包含了全部的css選擇器
4. 若是兩個選擇器做用在同一元素上，則權重高者生效。
5. 權重的級別根據選擇器被劃分爲四個分類：行內樣式，id，類與屬性，以及元素。
6. 你能夠經過CSS權重之爭進一步瞭解CSS權重。
7. 你也能夠經過CSS Specificity for Poker Players進一步瞭解CSS權重。
8. 若是兩個選擇器權重值相同，則最後定義的規則被計算到權重中(後面定度的CSS規則權重要更大，會取代前面的CSS規則)
9. 若是兩個選擇器權重值不一樣，則權重大的規則被計算到權重中
10. 若是一條規則包含了更高權重的選擇器，那麼這個規則權重更高
11. 最後定義的規則會覆蓋全部跟前面衝突的規則
12. 內聯樣式表含有比別的規則更高的權重
13. Id選擇器的權重比屬性選擇器更高
14. 你可使用id來增大權重
15. 類選擇器比任意數量的元素選擇器都高
16. 通配符選擇器跟繼承來的樣式，他們的權重以 0，0，0，0來計算
17. 你能夠用css權重計算器來計算權重。

什麼是CSS權重？

1. 權重決定了你css規則怎樣被瀏覽器解析直到生效。「css權重關係到你的css規則是怎樣顯示的」。參考閱讀【Understanding specificity】
2. 當不少的規則被應用到某一個元素上時，權重是一個決定哪一種規則生效，或者是優先級的過程。參考閱讀【Selector Specificity】
3. 每一個選擇器都有本身的權重。你的每條css規則，都包含一個權重級別。 這個級別是由不一樣的選擇器加權計算的，經過權重，不一樣的樣式最終會做用到你的網頁中 。參考閱讀【Understanding specificity】
4. 若是兩個選擇器同時做用到一個元素上，權重高者生效。

權重等級

每一個選擇器在權重級別中都有本身涇渭分明的位置。根據選擇器種類的不一樣能夠分爲四類，也決定了四種不一樣等級的權重值。

一、行內樣式，指的是html文檔中定義的style

行內樣式包含在你的html中 對你的元素產生直接做用，好比:

<h1 style="color: #fff;">header</h1>

二、ID選擇器

Id也是元素的一種標識，好比#div

三、類，屬性選擇器和僞類選擇器

這一類包括各類class，屬性選擇器，僞類選擇器好比 :hover,:focus等等。

四、元素和僞元素

元素跟僞元素選擇器，好比:before 與 :after.

 

這裏我要補充的：僞元素選擇器只包含如下幾種:

1. ::after
2. ::before
3. ::first-letter
4. ::first-line
5. ::selecton

詳細請參閱【Pseudo-elements】

僞元素跟僞類都是選擇器的補充，可是，僞類表示的是一種「狀態」好比hover，active等等，而僞元素表示文檔的某個肯定部分的表現，好比::first-line 僞元素只做用於你前面元素選擇器肯定的一個元素的第一行。

注意，僞元素選擇器選擇出來的「部分」 不在dom裏，也不能對其綁定事件。若是你對僞元素前面的選擇器定義的元素綁定了事件，僞元素一樣會生效。 永遠記得 僞元素生成的是「表現」。

擴展閱讀：

1. 如何給僞元素綁定事件
2. w3c規範中的僞元素

99

 

若是您對CSS選擇器還不太瞭解，或者說不太清楚CSS有哪些選擇器，我的建議你先閱讀如下幾篇文章，這樣更有助於幫助你閱讀本文後面的內容：

1. 《CSS3基本選擇器》
2. 《CSS3屬性選擇器》
3. 《CSS3僞類選擇器》
4. 《CSS選擇器優化》

大漠

若是你還分不清楚這些是怎麼分類的，你能夠看一下文章末尾的一個簡短的分類。

怎麼肯定權重

權重記憶口訣。從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者僞類+10，一個元素名，或者僞元素+1.好比

body #content .data img:hover

最終的權重值是0122；#content是一個id選擇器加了100，.data是一個class類選擇器加了10，：hover僞類選擇器加了10， body和img是元素加了1 。詳細參閱【CSS Specificity】

另外一種方法：計算有幾個id選擇器的數量爲a ,計算其餘屬性跟class選擇器的數量爲b ，計算元素名跟僞元素名的數量爲c ，而後結合起來就是權重。詳細參閱【CSS Selector Specificity]】

爲了幫助我更好的理解權重的概念，我製做了一張西斯人物能量表（你們能夠自動類比爲各類賽亞人，奧特曼戰鬥力對照表）每一個角色（選擇器）都擁有西斯能量（權重值，就跟賽亞人的戰鬥力同樣），這個決定了這我的在黑暗勢力裏有多牛逼，也決定了css規則在你的樣式表裏有多牛逼。詳細參閱【CSS Specificity Wars – Cheat Sheet】

權重計算測試

利用第一個規則能夠很容易計算權重，你能夠本身試試看看掌握了沒

01. *{}                         ====》0 02. li{}                        ====》1(一個元素) 03. li:first-line{}             ====》2(一個元素，一個僞元素) 04. ul li {}                    ====》2（兩個元素） 05. ul ol+li{}                  ====》3（三個元素） 06. h1+ *[rel=up] {}            ====》11（一個屬性選擇器，一個元素） 07. ul ol li.red{}              ====》13（一個類，三個元素）
08. li.red.level{}              ====》21（兩個類，一個元素）
09. style="" ====》1000(一個行內樣式) 10. p {}                        ====》1（一個元素） 11. div p {}                    ====》2（兩個元素） 12. .sith {}                    ====》10（一個類） 13. div p.sith{}                ====》12（一個類，兩個元素） 14. #sith{} ====》100（一個ID選擇器） 15. body #darkside .sith p {} ====》112(1+100+10+1,一個Id選擇器，一個類，兩個元素)

權重的基本規則

一、相同的權重：之後面出現的選擇器爲最後規則：

假如在外部樣式表中，同一個CSS規則你寫了兩次，那麼出如今前面的選擇器權重低，你的樣式會選擇後面的樣式：

#content h1 { padding: 5px; } #content h1 { padding: 10px; }

兩個選擇器的權重都是0，1，0，1，最後那個規則生效。

二、不一樣的權重，權重值高則生效

選擇器可能會包含一個或者多個與權重相關的計算點，若通過計算獲得的權重值越大，則認爲這個選擇器的權重高。詳細參閱【Understanding Specificity】

CSS權重規則

一、包含更高權重選擇器的一條規則擁有更高的權重。詳細參閱【Understanding Specificity】

二、Id選擇器的權重比屬性選擇器高,好比下面的例子裏 樣式表中#p123的權重明顯比[id=p123]的權重要高。

A: a#a-02 { background-image : url(n.gif); } and B: a[id="a-02"] { background-image : url(n.png); }

所以A規則比B規則的權重要高。詳細參閱【W3C CSS 2.1 Specification】

三、帶有上下文關係的選擇器比單純的元素選擇器權重要高。這條規則一樣也適用於含有多個元素的選擇器。詳細參閱【Cascade Inheritance】

四、與元素「捱得近」的規則生效，好比css中咱們定義瞭如下的規則，

#content h1 { padding: 5px; }

但html 中也定義了規則：

<style type="text/css"> #content h1 { padding: 10px; } </style>

Html中定義的規則由於跟元素捱得比較近，因此生效。詳細參閱【Understanding Specificity】

五、最後定義的這條規則會覆蓋上面與之衝突的規則。好比下面的例子：

p { color: red; background: yellow } p { color: green }

段落會呈現綠色的文字。固然也會出現黃色的背景，由於第一條規則只是被覆蓋了color屬性。詳細參閱【BrainJar.com】

六、不管多少個元素組成的選擇器，都沒有一個class選擇器權重高。好比說「.introduction」高於「html body div div h2 p」。詳細參閱【CSS Specificity for Poker Players】

七、通配符選擇器也有權重，權重被認爲是 0，0，0，0。好比 *， body * 被繼承的css屬性也帶有權重，權重是0，0，0，0。詳細參閱【CSS Specificity Clarified】

權重的例子

考慮三個代碼片斷：

A: h1 B: #content h1 C: <div id="content"> <h1 style="color: #fff">Headline</h1> </div> 

A的權重是0,0,0,1 (一個元素),B的權重是0，1，0，1（一個id選擇器，一個元素），c的權重是1，0，0，0 ，這是一個行內樣式。

由於0001 = 1 < 0101 = 101 < 1000,第三個規則權重最高，所以第三個規則將會生效。若去掉第三個規則，第二個規則將會生效。

權重實戰

一、利用LVHA原理來給連接應用樣式：若是你想展示不一樣狀態的連接樣式，必定要記住link-visited-hover-active的順序，或者簡寫爲LVHA。詳細參閱【Link Specificity】

二、永遠都不要使用「!important」：「若是你遇到了權重問題，第一個解決方法確定是去掉「!important」，「!important」會覆蓋全部的樣式規則，但「!important」根本沒有結構與上下文可言，因此不多用到。詳細參閱【Understanding Specificity、Selector Specificity】

三、利用id增長選擇器權重：利用ul#blogroll a.highlight代替a.highlight ，權重由0, 0, 1, 1 變成了0, 1, 1, 2。

四、減小選擇器的個數：「在css規則中儘量的使用較少的選擇器」。詳細閱讀【Understanding Specificity】

CSS權重計算工具及資源

一、撲克牌權重計算法

若是你以前沒有編程經驗，css讓你看得比較暈，這個比喻能夠幫你把一些概念弄得更清楚。把css規則做爲你手中的牌，最好的一套牌決定了你最終的樣式。

二、Css權重計算器

計算這個選擇器的權重

三、Understanding Specificity Tutorial

在這個教程中，你會關注權重。css權重關係到你的css規則是怎樣顯示的。你樣式表中的每條ｃｓｓ規則都帶有一個權重，這個權重級別是由不一樣的選擇器加權計算的，經過權重，不一樣的樣式最終會做用到你的網頁中。

四、Cascade Inheritance: Specificity

這裏會對權重問題進行一番討論。這些規則不只僅存在於一張樣式表中，也有多是多張樣式表。首先要明白，一個元素能夠被多個規則定義樣式。

五、CSS 2.1 Selectors Explained

對css2.1選擇器的一個全面的闡述。經過詳盡的瞭解css2.1的選擇器，能夠很大程度上優化你的html，好比減小沒必要要的class屬性，增長大量的div或者span標籤等。

六、CSS Specificity Bugs in IE

Ie中權重bug的一個簡短概述

七、CSS Structure and Rules

基本的css語法，僞類及僞元素，還有層疊規則。

八、Specificity

他看上去不怎麼重要，你也可能一直用不上，可是在大的項目中，你的CSS文件變得愈來愈大，那麼這個時候你的CSS就有可能會產生衝突。

什麼是什麼？

一、一個選擇器給元素定義了一個獨特的樣式。

p { padding: 10px; }

二、一個類選擇器利用類(在頁面中可能會有多個)定義選擇器

p.section { padding: 10px; }

三、一個id選擇器利用頁面中惟一一個id標識符定義一個選擇器

CSS: #section { padding: 10px; } (X)HTML: <p id="section">Text</> 

四、上下文選擇器能夠定義一個帶有層級關係順序的規則

p span { font-style: italic; }

上面這一條，全部在p元素中的span元素將會被應用樣式"font-style: italic;"。

五、一個屬性選擇器匹配了一個帶有特殊屬性或者屬性的值的元素

p[title] { font-weight: bold; }

匹配全部帶有title屬性的元素

六、僞類，是一種特殊的ｃｌａｓｓ，用來定義ｈｔｍｌ元素的行爲。通常都是用來給一些ｈｔｍｌ元素的特定狀態定義特殊效果。當觸發這個狀態時，效果也會生效。

a:visited { text-decoration: underline; }

七、僞元素，讓設計者能夠給實際不存在於文檔中的內容定義樣式。僞元素屬於特殊的元素，能夠利用僞元素來「憑空」生成內容，列表項的數字等。

p:first-line { font-variant: small-caps; } a:link:after { content: " (" attr(href) ")"; }

 

上面羅列的是CSS選擇器中的七種，但實際上CSS的選擇器是不僅這些，特別是CSS3，在CSS2.1的基礎上增長了些頗有意思的選擇器，在不須要類名的狀況下都能幫你選擇到須要的元素。感興趣的話能夠閱讀下列的文章：

1. 《CSS3基本選擇器》
2. 《CSS3屬性選擇器》
3. 《CSS3僞類選擇器》
4. 《CSS選擇器優化》

大漠

譯者手語：初次翻譯前端技術博文，整個翻譯依照原文線路進行，並在翻譯過程略加了我的對技術的理解。若是翻譯有不對之處，還煩請同行朋友指點。謝謝！

如需轉載煩請註明出處：

英文原文：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know

中文譯文：http://www.w3cplus.com/css/css-specificity-things-you-should-know.html