CSS優先級計算

在節點元素上，使用<code>style</code>屬性

通過<code>link</code>引入外部檔案

通過<code>style</code>标簽在頁面内引入

<code>index.html</code>檔案

<code>body.css</code>檔案

第一種方式相對後面兩種優先級高，與引入順序無關

無論<code>link</code>和<code>style</code>标簽放在<code>head</code>内，還是放在<code>body</code>内，或者放在<code>html</code>标簽結尾，頁面都會呈現<code>yellow</code>

第二種和第三種為平級引入，後引入的樣式覆寫之前的引入樣式

去掉<code>body</code>上的<code>style</code>标簽

調整<code>link</code>和<code>style</code>标簽的先後順序。<code>link</code>在前，<code>style</code>标簽在後，頁面呈現<code>red</code>，相反，頁面會呈現<code>green</code>

<code>id</code>

<code>class</code>

标簽

屬性

在一個頁面中<code>id</code>值應該是唯一，但是，當出現多個相同<code>id</code>時，樣式對所有<code>id</code>節點是有效的，使用方式：<code>#</code>後面跟節點<code>id</code>值

結果顯示，兩個段落中的文字都呈現<code>red</code>

<code>id</code>相對<code>class</code>和标簽具有更高的權重，當<code>id</code>和<code>class</code>、标簽同時對一個節點設定樣式時，<code>id</code>的權重為最高

通過<code>link</code>和<code>style</code>标簽對同一個<code>id</code>設定樣式時，後引入的樣式覆寫之前的樣式

使用<code>class</code>可以對多個節點同時設定樣式，并且可以疊加<code>class</code>使用。使用方式<code>.</code>後面跟節點單個<code>class</code>名

此時，第一個段落呈現<code>red</code>，第二個段落呈現<code>green</code>

調整<code>html</code>

調整<code>class-p</code>和<code>class-p-2</code>的位置後，頁面呈現效果不變。說明：<code>class</code>樣式的渲染和<code>class</code>的使用順序無關，與<code>class</code>樣式設定的先後順序有關，同權重的<code>class</code>樣式，在樣式設定中，靠後的樣式設定覆寫之前的樣式設定

通過節點上的屬性也可以得到要進行樣式設定的節點

第二個段落有<code>title</code>屬性，是以第二個段落呈現<code>red</code>

通過标簽名擷取節點進行樣式設定

頁面中所有<code>p</code>标簽節點呈現<code>red</code>

以上四種方式可以混合使用，對相應的節點進行樣式設定。結合方式包括層級嵌套、樣式疊加、節點關聯等。最終以權重高者為呈現效果。

以上四種方式，針對單個而言，<code>id</code>最高，<code>class</code>和屬性同級（後面的樣式覆寫之前的樣式），标簽最低。

當四種方式混合使用時，則以權重的結果為準。對同一結點存在的<code>id</code>、<code>class</code>、屬性和标簽樣式進行排序，排位第一者為最終呈現效果。例如：對于節點<code>p</code>存在多種類型的樣式設定，首先挑選所有帶<code>id</code>的樣式，包括嵌套樣式。相同<code>id</code>下，對另一類型樣式進行排序

雖然兩種樣式設定都有<code>id</code>，并且<code>green</code>效果在<code>red</code>之後被設定，但是通過排序可以得到相同<code>#id_p</code>下，前一個存在<code>.body</code>，是以最終呈現效果為<code>red</code>

存在<code>class</code>、屬性和标簽的樣式時，依次排序，同類型或同權重（<code>class</code>和屬性同權重）的樣式，靠後的樣式覆寫之前的樣式（以類型為準，不以名稱為準），最終排位第一者為最終呈現效果。

注意：

嵌套、疊加、<code>&gt;</code>、 <code>+</code>等方式，不會影響最終效果。

<code>:nth-child</code>、<code>:first-child</code>、<code>:last-child</code>等僞類高于<code>class</code>和屬性

<code>!important</code>為樣式中的特例，它的權重為最高，高于<code>id</code>、<code>class</code>、屬性、标簽以及<code>style</code>屬性

頁面呈現效果為<code>green</code>。但是當對樣式設定進行排序時，仍然是同類型樣式下，以另一類型權重高者為最終效果。例如

相同<code>class</code>及<code>!important</code>下，前一種樣式設定存在<code>body</code>标簽，後一種則沒有，是以最終效果呈現<code>blue</code>

盡量避免使用<code>!important</code>。因為<code>!important</code>權重最高，會對節點的該屬性做強制性設定，在使用時要慎重

使用場景

引入插件時，對插件中的樣式進行強覆寫。當引入插件時，在不想修改插件中的樣式代碼情況下，可通過<code>!important</code>對插件内的樣式屬性進行強制複寫

對行内樣式進行強覆寫。對于自動生成或者動态引入的的帶有行内樣式<code>html</code>結構時，可以通過<code>!important</code>對行内樣式進行強制複寫

變通

!important<code>在很多時候是不建議使用的，在</code>stylelint<code>中有一項規則即禁止使用</code>!important<code>。有一種變通的方式，可以在多數情況下實作類似</code>!important`的效果

<code>html &lt;body class="body"&gt; &lt;p class="p"&gt; &lt;span class="span"&gt;一段文本&lt;/span&gt; &lt;/p&gt; &lt;/body&gt;</code>

<code>css .body .p .span { color: red; } .span.span.span.span.span {/** 自身樣式疊加 **/ color: green; }</code>

在不考慮行内樣式和<code>id</code>的情況下，對自身樣式進行重複疊加多次使用，可以增加<code>class</code>權重，對樣式進行複寫。

使用前提：

沒有行内樣式<code>style</code>屬性

沒有<code>id</code>樣式

自身樣式疊加次數多餘嵌套個數

好處：不用考慮<code>DOM</code>層級關系，減少層級嵌套

綜合以上說明，權重的計算基本遵從以下規則：

按類型比對，類型權重高者顯示；

同類型，按數量比對，多者顯示；

同數量，按先後順序比對，後者顯示

樣式嵌套使用，除了增權重重外，也展現了<code>DOM</code>的某種結構關系。但嵌套并不是在任何情況下都需要的。

嵌套多用于塊内獨有的樣式設定。某種樣式僅在某個塊内有效，可使用嵌套。

多個頁面同時開發時，為避免合并後樣式被覆寫，可使用嵌套。

嵌套的使用并不是越多越好。嵌套越多，權重越大，但同時對頁面的性能消耗也越大。建議使用繼承和樣式疊加。

本文轉自xsster51CTO部落格，原文連結：http://blog.51cto.com/12945177/1948475 ，如需轉載請自行聯系原作者