CSS樣式優先級怎樣劃分？CSS優先級規則

義CSS樣式時，經常出現兩個或更多樣式規則應用在同一元素上的情況。此時CSS就會根據樣式規則的權重，優先顯示權重最高的樣式。CSS優先級指的就是CSS樣式規則的權重。在網頁制作中，CSS為每個基礎選擇器都指定了不同的權重，方便我們添加樣式代碼。為了深入理解CSS優先級，我們通過一段示例代碼進行分析。CSS樣式代碼如下：

p{ color:red;}           /*標簽樣式*/
.blue{ color:green;}     /*class樣式*/
theader{ color:blue;}    /*id樣式*/

CSS樣式代碼對應的HTML結構為：

<p class="blue" id="header">
    幫幫我，我到底顯示什么顏色?
</p>

在上面的示例代碼中，使用不同的選擇器對同一個元素設置文本顏色，這時瀏覽器會根據CSS選擇器的優先級規則解析CSS樣式。為了便于判斷元素的優先級，CSS為每一種基礎選擇器都分配了一個權重，我們可以通過虛擬數值的方式為這些基礎選擇器匹配權重。假設標簽選擇器具有權重為1.類選擇器具有權重則為10，id選擇器具有權重則為l00。這樣id選擇器“#header”就具有最大的優先級，因此文本顯示為藍色。

對于由多個基礎選擇器構成的復合選擇器(并集選擇器除外)，其權重可以理解為這些基礎選擇器權重的疊加。例如，下面的CSS代碼。

p strong{color:black}            /*權重為：1+1*/
strong.blue{color:green;}        /*權重為：1+10*/
.father strong{color:yellow}     /*權重為：10+1*/
p.father strong{color:orange;}   /*權重為：1+10+1*/
p.father .blue{color:gold;}      /*權重為：1+10+10*/
theader strong{color:pink;}      /*權重為：100+1*/
#header strong.blue{color:red;}  /*權重為：100+1+10*/

對應的HTML結構為：

<p class="father" id="header">
    <strong class="blue">文本的顏色</strong>
</p>

這時，CsS代碼中的“#header strong.blue”選擇器的權重最高，文本顏色將顯示為紅色。此外，在考慮權重時，我們還需要注意一些特殊的情況。

(1)繼承樣式的權重為0

在嵌套結構中、h不管父元素樣式的權重多大，被子元素繼承時，它的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。例如，下面的CSS樣式代碼。

strong{color:red;}
#header{color:green;}

CSS樣式代碼對應的HTML結構如下：

<p id="header" class="blue">
  <strong>繼承樣式不如自己定義的權重大</strong>
</p>

在上面的代碼中，雖然“#header”具有權重100，但被標簽繼承時權重為0。而“strong”選擇器的權重雖然僅為1，但它大于繼承樣式的權重，所以頁面中的文本顯示為紅色。

(2)行內樣式優先

應用style屬性的元素，其行內樣式的權重非常高。換算為數值，我們可以理解為遠大于100。因此行內樣式擁有比上面提到的選擇器都高的優先級。

(3)權重相同時，CSS的優先級遵循就近原則

也就是說，靠近元素的樣式具有最大的優先級，或者說按照代碼排列上下順序，排在最下邊的樣式優先級最大。例如，下面為外部定義的CSS示例代碼。

/*CSS文檔,文件名為style_red.css*/
#header{color:red;}                     /*外部樣式*/

對應的HTML結構代碼如下：

<title>CSS優先級</title>
<link rel="stylesheet"href="style_red.css"type="text/css"/> /*引入外部
定義的CSS代碼*/
<style type="text/css">
#header{color:gray;}
</style>
</head>
<body>
/*內嵌式樣式*/
<p id="header">權重相同時，就近優先</p>
</body>

在上面的示例代碼中，第2行代碼通過外鏈式引入CSS樣式，該樣式設置文本樣式顯示為紅色。第3~5行代碼通過內嵌式引入CSS樣式，該樣式設置文本樣式顯示為灰色。

上面的頁面被解析后，段落文本將顯示為灰色，即內嵌式樣式優先。這是因為內嵌樣式比外鏈式樣式更靠近HTML.元素。同樣的道理，如果同時引用兩個外部樣式表，則排在下面的樣式表具有較大的優先級。如果此時將內嵌樣式更改為：

p{color:gray;}                   /*內嵌式樣式*/

此時外鏈式的id選擇器和嵌入式的標簽選擇器權重不同，“#header”的權重更高，文字將顯示為外部樣式定義的紅色。

(4)CSS定義“limportant”命令，會被賦予最大的優先級

當CSS定義了“limportant”命令后，將不再考慮權重和位置關系，使用“limportant”的標簽都具有最大優先級。例如，下面的示例代碼。

#header{color:red!important;}

應用此樣式的段落文本顯示為紅色，因為“limportant”命令的樣式擁有最大的優先級。需要注意的是，“limportant”命令必須位于屬性值和分號之間，否則無效。

復合選擇器的權重為組成它的基礎選擇器權重的疊加，但是這種疊加并不是簡單的數字之和。下面通過一個案例來具體說明，如例1所示。

例1 examplel1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>復合選擇器權重的疊加</title>
<style type="text/css">
.inner{text-decoration:line-through;}/*類選擇器定義刪除線，權重為10*/
div div div div div div div div div div div{text-decoration:underline;}
/*后代選擇器定義下畫線，權重為11個1的疊加*/
 </style>
</head>
<body>
<div>
  <div><div><div><div><div><div><div><div><div>
     <div class="inner">文本的樣式</div>
  </div></div></div></div></div></div></div></div></div>
</div>
</body>
</html>

例1共使用了11對<div>標簽，它們層層嵌套。第15行代碼我們對最里層的<div>定義類名“inner”。第7、8行代碼，使用類選擇器和后代選擇器分別定義最里層div的樣式。此時瀏覽器中文本的樣式到底如何顯示呢?如果僅僅將基礎選擇器的權重相加，后代選擇器(包含11層div)的權重為11，大于類選擇器“.inner”的權重10，文本將添加下畫線。

運行例1，效果如下所示。

在上圖中，文本并沒有像預期的那樣添加下畫線，而顯示了類選擇器“.inner”定義的刪除線。可見，無論在外層添加多少個標簽，復合選擇器的權重無論為多少個<div>標簽選擇器的疊加，其權重都不會高于類選擇器。同理，復合選擇器的權重無論為多少個類選擇器和標簽選擇器的疊加，其權重都不會高于i選擇器。

謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先后順序。既然樣式有優先級，那么就會有一個規則來約定這個優先級，而這個“規則”就是重點。

【引言】

講解完這篇CSS優先級的文章后，我們就把CSS相關的知識全部講解完了，大家可以通過關注我的頭條賬號在我的主頁文章分類去查看，我們一共分為七節課，先后講解了CSS基礎語法、CSS樣式、CSS框模型、CSS定位、CSS選擇器、CSS高級語法、CSS優先級，等所有的CSS知識點。接下來的我將會學習相關CSS3的新知識，希望不要停止學習哦！跟著我一起動起來！

CSS優先級

一般來說，CSS的優先級分為引入方式的優先級和樣式的優先級。

CSS引入方式的優先級

樣式表允許以多種方式規定樣式信息。樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？

之前我們也說過CSS樣式表的三種引入方式：

1、行內樣式

最直接簡單的一種方式，對HTml標簽直接使用style=“”。

2、內嵌樣式

內嵌樣式就是將CSS代碼寫在<head></head>之間，并且用<style></style>進行聲明。

3、鏈接樣式

鏈接樣式是使用頻率最高，最實用的樣式，只需要在<head></head>之間加上<link…/>就可以了。

4、導入樣式

導入樣式和鏈接樣式比較相似，采用@import樣式導入CSS樣式表，在HTML初始化時，會被導入到HTML或者CSS文件中，成為文件的一部分，類似第二種內嵌樣式。

那么四種CSS引入方式的優先級到底是怎樣的呢？

1、就近原則

2、理論上：行內>內嵌>鏈接>導入

3、實際上：內嵌、鏈接、導入在同一個文件頭部，誰離相應的代碼近，誰的優先級高（頁面多種方式使用css樣式引入）

另外呢，在昨天的CSS高級語法中，有小伙伴留言問？

CSS樣式不是最好放一個表中嗎？頭部、?部、側邊丶字體分開，那要加載多個會影響效率吧？

在這我想說：

分開寫，幾乎沒影響的，無非就是分開多條會使文件大一些而已，而css文件只要沒變化，幾乎只需要下載一次，然后就會一直呆在瀏覽器的緩存里的。而且通常服務器在發送網頁時都會先用gzip壓縮，瀏覽器收到后會自動解壓，這種情況下不管哪種寫法的css文件壓縮后的大小幾乎都是一樣的，因為那些多余的空格和回車幾乎可以被壓縮到忽略不計。另外，分開多行寫會使代碼可讀性更好，這個好處會遠遠高于由于文件大對頁面加載造成的一點點影響。

CSS樣式的優先級

當創建的樣式表越來越復雜時，一個標簽的樣式將會受到越來越多的影響，這種影響可能來自周圍的標簽，也可能來自其自身。下面我們從這兩方面去看看 CSS 樣式的優先級。

1、CSS的繼承性

這個繼承性就是從父級元素的CSS屬性被傳到其子標簽上，坦白說父級<div>有個color：red的屬性，其里面子標簽<p>也會繼承這個color：red。

由此可見，當網頁比較復雜， HTML 結構嵌套較深時，一個標簽的樣式將深受其祖先標簽樣式的影響。影響的規則是：

CSS 優先規則1： 最近的祖先樣式比其他祖先樣式優先級高。例如：

如果我們把一個標簽從祖先那里繼承來的而自身沒有的屬性叫做"祖先樣式"，那么"直接樣式"就是一個標簽直接擁有的屬性。又有如下規則：

CSS 優先規則2："直接樣式"比"祖先樣式"優先級高。例如：

2、選擇器的優先級

在討論 CSS 優先級之前，先說說 CSS 7 種基礎的選擇器：

ID 選擇器，如 #id{}
類選擇器，如 .class{}
屬性選擇器，如 a[href="segmentfault.com"]{}
偽類選擇器，如 :hover{}
偽元素選擇器，如 ::before{}
標簽選擇器，如 span{}
通配選擇器，如 *{}

CSS 優先規則3：優先級關系：內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器

提示：css會先查看規則的權重（!important），加了權重的優先級最高，當權重相同的時候，會比較選擇器的特殊性值（Specificity），當Specificity也一樣的時候，css規則會按順序排序，后聲明的規則優先級高。

咱們來看看下面這點HTML文檔，然后分析一下：

最終的 color 為 black，因為內聯樣式比其他選擇器的優先級高。

所有 CSS 的選擇符由上述 7 種基礎的選擇器或者組合而成，組合的方式有 3 種：

后代選擇符： .father .child{}
子選擇符： .father > .child{}
相鄰選擇符: .bro1 + .bro2{}

當一個標簽同時被多個選擇符選中，我們便需要確定這些選擇符的優先級。我們有如下規則：

CSS 優先規則4：計算選擇符中 ID 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和（b），計算選擇符中標簽選擇器和偽元素選擇器的個數之和（c）。按 a、b、c 的順序依次比較大小，大的則優先級高，相等則比較下一個。若最后兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷。例如：

由規則 4 可見，<span> 的 color 為 red。

如果外部樣式表和內部樣式表中的樣式發生沖突會出現什么情況呢？這與樣式表在 HTML 文件中所處的位置有關。樣式被應用的位置越在下面則優先級越高，其實這仍然可以用規則 4 來解釋。例如：

從順序上看，內部樣式在最下面，被最晚引用，所以 <div> 的背景色為 blue。

上面代碼中，@import 語句必須出現在內部樣式之前，否則文件引入無效。當然不推薦使用 @import 的方式引用外部樣式文件，原因是如果瀏覽器版本較低，無法正確導入外部樣式文件，另外就是當 HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載；

CSS 還提供了一種可以完全忽略以上規則的方法，當你一定、必須確保某一個特定的屬性要顯示時，可以使用這個技術。

CSS 優先規則5：屬性后插有 !important 的屬性擁有最高優先級。若同時插有 !important，則再利用規則 3、4 判斷優先級。

雖然 .father .son 擁有更高的權值，但選擇器 p 中的 background 屬性被插入了 !important，所以 <p> 的 background 為 red。

錯誤的說法

你在百度的時候有的人會這樣說：

即 ID 選擇器權值為 100，類選擇器權值為 10，標簽選擇器權值為 1，當一個選擇器由多個 ID 選擇器、類選擇器或標簽選擇器組成時，則將所有權值相加，然后再比較權值。這種說法其實是有問題的。比如一個由 11 個類選擇器組成的選擇器和一個由 1 個 ID 選擇器組成的選擇器指向同一個標簽，按理說 110 > 100，應該應用前者的樣式，然而事實是應用后者的樣式。錯誤的原因是：選擇器的權值不能進位。還是拿剛剛的例子說明。11 個類選擇器組成的選擇器的總權值為 110，但因為 11 個均為類選擇器，所以其實總權值最多不能超過 100，你可以理解為 99.99，所以最終應用后者樣式。

關于CSS優先級就說這么多了，基本上涵蓋了所有的CSS優先級的知識，大家可以認真學習一下，到這，CSS的所有知識就講解完了。

下一篇我們來學習CSS3相關的知識內容。

PS：

本文為‘Web前端進階指南’原創，手動碼字不易，小伙伴們別忘了順手點個贊加個關注哈，有什么不懂的下方留言評論或私信。謝謝大家哈！

邊文章我們說了使用css的三種不同的選擇器，本篇文章我們主要介紹css的繼承規則以及css代碼的權重優先級問題。

（1）css的繼承規則

CSS的某些樣式代碼是具有繼承性的，那么究竟什么是繼承呢？繼承是一種規則，它允許樣式不僅應用于某個特定html標簽元素，而且應用于其后代。比如下面代碼：我們設置p標簽的字體顏色為紅色并添加1像素的紅色邊框。

在網頁中的顯示效果就如下圖所示：

從上邊的圖片你可以看出字體顏色為紅色不僅使p標簽中的文字變成了紅色，還應用于p標簽中的所有子元素文本，這里子元素為span標簽。但是邊框屬性并沒有應用到子元素中去。

經過我們總結測試，可以得出以下結論：

關于文字樣式的屬性，都具有繼承性。這些屬性包括：color、 text-開頭的、line-開頭的、font-開頭的。
關于盒子、定位、布局的屬性，都不能繼承。

（2）css代碼的權重優先級

css就像工程師一樣是很嚴謹的，有的時候我們為同一個元素設置了不同的CSS樣式代碼，那么元素會啟用哪一個CSS樣式呢?我們來看一下面的代碼：

上邊的代碼中，p和.first都匹配到了p這個標簽上，那么會顯示哪種顏色呢？#0f0是正確的顏色，那么為什么呢？是因為瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。

下面是權值的規則：

標簽（div、p、span等）的權值為1，類選擇符（.xxx）的權值為10，ID選擇符（#xxx）的權值為100，內聯樣式（style="color:#f00;"）的權值為1000。

我們來做一個權重的拔高練習，觀察以下代碼看一下p標簽以及span標簽內的文字顯示顏色應該是什么？

由上邊我們可以看出來，p標簽的樣式中#second的權值最高為100，那么p的文字顏色為yellow，而span標簽樣式中內聯樣式權值最高為1000，那么span的文字顏色就為#000。我們的結果就會如下圖所示：

對于css的繼承以及代碼優先級的問題我們今天就先介紹到這里，大家在平時可以自己多加練習練習，自己多寫幾個權重的例子嘗試嘗試。

每日金句：人若有志，就不會在半坡停止。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

在線咨詢

上一篇：在網頁開發中，我們需要掌握的常用HTML標簽有哪些？
下一篇：帝國CMS采集技巧大揭秘，文章變形不再是難題

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商