前天的啥時(shí)候在微頭條放了一道關(guān)于 css 選擇器權(quán)重的面試題，只有兩個(gè)答案，但是 40% 的人都回答錯(cuò)了，今天就來(lái)詳細(xì)地看看。

<style>
 .box h1#title { color:red }
 #box h1.title { color:blue }
</style>
<div id="box" class="box">
 <h1 id="title" class="title">愛(ài)學(xué)習(xí)的前端人</h1>
</div>

正確的答案：文字應(yīng)該是藍(lán)色。

這是一道關(guān)于 css 選擇器權(quán)重相關(guān)的面試題，今天就來(lái)學(xué)習(xí)學(xué)習(xí) css 選擇器權(quán)重如何計(jì)算?

css 選擇器權(quán)重

如果兩組選擇器都定位到同一元素，且對(duì)同一屬性設(shè)置不同的樣式，此時(shí)到底使用的是哪個(gè)樣式，就需要通過(guò)選擇器權(quán)重來(lái)決定到底使用的是哪個(gè)樣式?

具體的樣式繼承順序應(yīng)該為：

選中且設(shè)置 !important 的 > 權(quán)重高的 > 權(quán)重相同位置靠后的 > 來(lái)自繼承的。

一個(gè)選擇器的優(yōu)先級(jí)可以由四部分計(jì)算得分：

• 千位：如果聲明在 style 的屬性里，則該部分得一分。
• 百位：選擇器包含 id 選擇器，則該位得一分。
• 十位：選擇器包含類(lèi)、屬性選擇器和偽類(lèi)，則該位得一分。
• 個(gè)位：選擇器包含標(biāo)簽、偽元素選擇器，則該位得一分。

舉例：

#header p.content.active
/*
選擇器權(quán)重計(jì)算過(guò)程：
千位：0 。樣式?jīng)]有定義在 style 中 ，所以千位為 0
百位：1。有一個(gè) id 選擇器。
十位：2。有兩個(gè)類(lèi)選擇器。
個(gè)位：1。包含一個(gè)標(biāo)簽。
最終權(quán)重值為：0121
*/

實(shí)例1：p 標(biāo)簽內(nèi)的文字應(yīng)該是什么顏色?

<p>愛(ài)學(xué)習(xí)的前端人</p>
<style>
 p { color:red }
 body { color:blue !important }
</style>

正確答案：紅色。

解析：上述只有 p 標(biāo)簽選中到對(duì)應(yīng) p 元素了，body 它是屬于 p 的父級(jí)元素，所以是屬于繼承的，來(lái)自繼承的權(quán)重是最低的，所以文字是紅色。

實(shí)例2：a 標(biāo)簽文字會(huì)繼承父級(jí)樣式還是會(huì)使用瀏覽器默認(rèn)顏色?

<a href="#">前端人</a>
<style>
 body { color:red !important }
</style>

正確答案：藍(lán)色。

解析：雖然 a 標(biāo)簽沒(méi)有設(shè)置樣式，但是瀏覽器會(huì)有內(nèi)置的默認(rèn)顏色，使用調(diào)試工具可以看到：

按照權(quán)重規(guī)則來(lái)計(jì)算：

a:-webkit-any-link -> 0011
body                       -> 0001

所以瀏覽器會(huì)優(yōu)先使用內(nèi)置默認(rèn)的文字顏色。

實(shí)例3：40% 都做錯(cuò)的面試題。

<style>
 .box h1#title { color:red }
 #box h1.title { color:blue }
</style>
<div id="box" class="box">
 <h1 id="title" class="title">愛(ài)學(xué)習(xí)的前端人</h1>
</div>

正確答案：藍(lán)色。

解析：

.box h1#title
/*
選擇器權(quán)重計(jì)算過(guò)程：
千位：0 。樣式?jīng)]有定義在 style 中 ，所以千位為 0
百位：1。有一個(gè) id 選擇器。
十位：1。有 1 個(gè)類(lèi)選擇器。
個(gè)位：1。包含一個(gè)標(biāo)簽。
最終權(quán)重值為：0111
*/
#box h1.title
/*
選擇器權(quán)重計(jì)算過(guò)程：
千位：0 。樣式?jīng)]有定義在 style 中 ，所以千位為 0
百位：1。有一個(gè) id 選擇器。
十位：1。有 1 個(gè)類(lèi)選擇器。
個(gè)位：1。包含一個(gè)標(biāo)簽。
最終權(quán)重值為：0111
*/

上述兩個(gè)選擇器的權(quán)重都是 0111。

css 選擇器權(quán)重相同的時(shí)候，繼承靠后面的樣式。所以 h1 標(biāo)簽會(huì)繼承后面的樣式是藍(lán)色。

上面這三個(gè)實(shí)例題都是非常典型的例子，可以對(duì)應(yīng)著實(shí)例，好好理解上邊的 css 權(quán)重介紹，內(nèi)容總結(jié)性比較強(qiáng)。