除了浮動之外，css權重問題是你要了解的，最複雜的一個概念之一。css每條規則權重的不同，是你所期望的效果，沒有通過css規則在元素上生效的主要原因。為了減少除錯bug的時間，你需要了解瀏覽器是怎樣解析你的程式碼的。為了完成這個目標，你需要對權重是如何工作的，有一個清楚的認識。很多Css出現問題的場景，都是某處定義了一個更高權重的規則，導致此處規則不生效。

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

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

CSS權重：概述

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

什麼是CSS權重？

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

權重等級

每個選擇器在權重級別中都有自己涇渭分明的位置。根據選擇器種類的不同可以分為四類，也決定了四種不同等級的權重值。

1、行內樣式，指的是html文件中定義的style

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

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

2、ID選擇器

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

3、類，屬性選擇器和偽類選擇器

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

4、元素和偽元素

元素跟偽元素選擇器，比如:before 與 :after.

這裡我要補充的：偽元素選擇器只包含以下幾種:

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

偽元素跟偽類都是選擇器的補充，但是，偽類表示的是一種“狀態”比如hover，active等等，而偽元素表示文件的某個確定部分的表現，比如::first-line 偽元素只作用於你前面元素選擇器確定的一個元素的第一行。

注意，偽元素選擇器選擇出來的“部分” 不在dom裡，也不能對其繫結事件。如果你對偽元素前面的選擇器定義的元素綁定了事件，偽元素同樣會生效。 永遠記得 偽元素生成的是“表現”。

擴充套件閱讀：

99

如果您對CSS選擇器還不太瞭解，或者說不太清楚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選擇器，一個類，兩個元素)

權重的基本規則

1、相同的權重：以後面出現的選擇器為最後規則：

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

#content h1 {
  padding: 5px;
}

#content h1 {
  padding: 10px;
}

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

2、不同的權重，權重值高則生效

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

CSS權重規則

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

A:
a#a-02 { background-image : url(n.gif); }

and

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

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

4、與元素“捱得近”的規則生效，比如css中我們定義了以下的規則，

#content h1 {
  padding: 5px;
}

但html 中也定義了規則：

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

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

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

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

6、無論多少個元素組成的選擇器，都沒有一個class選擇器權重高。比如說“.introduction”高於“html body div div h2 p”。詳細參閱【CSS Specificity for Poker Players】

7、萬用字元選擇器也有權重，權重被認為是 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,第三個規則權重最高，因此第三個規則將會生效。若去掉第三個規則，第二個規則將會生效。

權重實戰

1、利用LVHA原理來給連結應用樣式：如果你想展現不同狀態的連結樣式，一定要記住link-visited-hover-active的順序，或者簡寫為LVHA。詳細參閱【Link Specificity】

2、永遠都不要使用“!important”：“如果你遇到了權重問題，第一個解決方法肯定是去掉“!important”，“!important”會覆蓋所有的樣式規則，但“!important”根本沒有結構與上下文可言，所以很少用到。詳細參閱【Understanding Specificity、Selector Specificity】

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

4、減少選擇器的個數：“在css規則中儘可能的使用較少的選擇器”。詳細閱讀【Understanding Specificity】

CSS權重計算工具及資源

如果你之前沒有程式設計經驗，css讓你看得比較暈，這個比喻可以幫你把一些概念弄得更清楚。把css規則作為你手中的牌，最好的一套牌決定了你最終的樣式。

2、Css權重計算器

計算這個選擇器的權重

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

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

對css2.1選擇器的一個全面的闡述。通過詳盡的瞭解css2.1的選擇器，可以很大程度上優化你的html，比如減少不必要的class屬性，增加大量的div或者span標籤等。

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

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

他看上去不怎麼重要，你也可能一直用不上，但是在大的專案中，你的CSS檔案變得越來越大，那麼這個時候你的CSS就有可能會產生衝突。

什麼是什麼？

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

p { padding: 10px; }

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

p.section { padding: 10px; }

3、一個id選擇器利用頁面中唯一一個id識別符號定義一個選擇器

CSS: #section { padding: 10px; }

(X)HTML: <p id="section">Text</>

4、上下文選擇器可以定義一個帶有層級關係順序的規則

p span { font-style: italic; }

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

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

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

匹配所有帶有title屬性的元素

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

a:visited { text-decoration: underline; }

7、偽元素，讓設計者可以給實際不存在於文件中的內容定義樣式。偽元素屬於特殊的元素，可以利用偽元素來“憑空”生成內容，列表項的數字等。

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

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

大漠

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

如需轉載煩請註明出處：