愛學(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è)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

css 選擇器權(quán)重

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

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

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

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

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

舉例：

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

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

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

正確答案：紅色。

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

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

前端人

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

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

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

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

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

實例3：40% 都做錯的面試題。

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

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

解析：

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

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

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

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

當(dāng)前名稱：百分之四十的人都做錯的一道 CSS 面試題
網(wǎng)頁路徑：http://m.fisionsoft.com.cn/article/coohied.html