愛學(xué)習(xí)的前端人

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

成都創(chuàng)新互聯(lián)專注于廣南企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站建設(shè)。廣南網(wǎng)站建設(shè)公司,為廣南等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

css 選擇器權(quán)重

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

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

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

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

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

舉例：

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

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

愛學(xué)習(xí)的前端人

正確答案：紅色。

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

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

前端人

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

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

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

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

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

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

 
愛學(xué)習(xí)的前端人

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

解析：

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

新聞名稱：百分之四十的人都做錯(cuò)的一道 CSS 面試題
本文來源：http://uogjgqi.cn/article/coohied.html