站長(zhǎng)資訊網(wǎng)見(jiàn)微知著，本篇文章給大家分享兩道有意思的 CSS 面試題，考察考察你的基礎(chǔ)！
前端（vue）入門(mén)到精通課程：進(jìn)入學(xué)習(xí)
API 文檔、設(shè)計(jì)、調(diào)試、自動(dòng)化測(cè)試一體化協(xié)作工具：點(diǎn)擊使用
今天在論壇，有看到這樣一道非常有意思的題目，簡(jiǎn)單的代碼如下：
First Paragraph
樣式如下：
p#a { color: green; } div::first-line { color: blue; }
試問(wèn)，標(biāo)簽 <p> 內(nèi)的文字的顏色，是 green 還是 blue 呢？
有趣的是，這里的最終結(jié)果是藍(lán)色，也就是 color: blue 生效了?！就扑]學(xué)習(xí)：css視頻教程】
不對(duì)，正常而言，ID 選擇器的優(yōu)先級(jí)不應(yīng)該比偽類(lèi)選擇器高么？為什么這里反而是偽類(lèi)選擇器的優(yōu)先級(jí)更高呢？
并且，打開(kāi)調(diào)試模式，我們定位到 <p> 元素上，只看到了 color: green 生效，沒(méi)找到 div::first-line 的樣式定義：
只有再向上一層，我們找到 <div> 的樣式規(guī)則，才能在最下面看到這樣一條規(guī)則：
因此，這里很明顯，是<p> 標(biāo)簽繼承了父元素 <div> 的這條規(guī)則，并且作用到了自身第一行元素之上，覆蓋了原本的 ID 選擇器內(nèi)定義的 color: green。
再進(jìn)行驗(yàn)證
這里，另外一個(gè)比較迷惑的點(diǎn)在于，為什么 ID 選擇器的優(yōu)先級(jí)比 ::first-line 選擇器更低。
我們?cè)僮鲆恍┖?jiǎn)單的嘗試：
下面的 DEMO 展示了 ::first-line 樣式和各種選擇器共同作用時(shí)的優(yōu)先級(jí)對(duì)比，甚至包括了 !important 規(guī)則：
- 第 1 段通過(guò)標(biāo)簽選擇器設(shè)置為灰色
- 第 2 段通過(guò)類(lèi)選擇器設(shè)置為灰色
- 第 3 段通過(guò) ID 選擇器設(shè)置為灰色
- 第 4 段通過(guò) !important bash 設(shè)置為灰色
綜上的同時(shí)，每一段我們同時(shí)都使用了 ::first-line 選擇器。
::first-line vs. tag selector
This paragraph ...
::first-line vs class selector
This paragraph color i...
::first-line vs ID selector
This paragraph color is set ...
::first-line vs !important
This paragraph color is ....
p { color: #444; } p::first-line { color: deepskyblue; } .p2 { color: #444; } .p2::first-line { color: tomato; } #p3 { color: #444; } #p3::first-line { color: firebrick; } #p4 { color: #444 !important; } #p4::first-line { color: hotpink; }
CodePen Demo — ::first-line: demo
https://codepen.io/KittyGiraudel/pen/kWobaa/569e082a67400f5fb39a96030d0e9b6c
看看效果：
可以看到，無(wú)論是什么選擇器，優(yōu)先級(jí)都沒(méi)有 ::first-line 高。
究其原因，在于，::first-line 其實(shí)是個(gè)偽元素而不是一個(gè)偽類(lèi)，被其選中的內(nèi)容其實(shí)會(huì)被當(dāng)成元素的子元素進(jìn)行處理，類(lèi)似于 ::before，::after 一樣，因此，對(duì)于父元素的 color 規(guī)則，對(duì)于它而言只是一種級(jí)聯(lián)關(guān)系，通過(guò) ::first-line 本身定義的規(guī)則，優(yōu)先級(jí)會(huì)更高！
這也是為什么，在 MDN 文檔中，更推薦的是雙冒號(hào)的寫(xiě)法（當(dāng)然瀏覽器都支持單冒號(hào)的寫(xiě)法）– MDN — ::first-line
再來(lái)一題，MDN 的錯(cuò)誤例子？一個(gè)有意思的現(xiàn)象
說(shuō)完上面這題。我們?cè)賮?lái)看看一題，非常類(lèi)似的題目。
在 MDN 介紹 :not 的頁(yè)面，有這樣一個(gè)例子：
/* Selects any element that is NOT a paragraph */ :not(p) { color: blue; }
意思是，:not(p) 可以選擇任何不是 <p> 標(biāo)簽的元素。然而，上面的 CSS 選擇器，在如下的 HTML 結(jié)構(gòu)，實(shí)測(cè)的結(jié)果不太對(duì)勁。
p
divspanh1
結(jié)果如下：
CodePen Demo — :not pesudo demo
https://codepen.io/Chokcoco/pen/KKZbWjy
意思是，:not(p) 仍然可以選中 <p> 元素。是的，在多個(gè)瀏覽器，得到的效果都是一致的。
看到這里，你可以再停一下，思考一下，為什么 <p> 元素的顏色仍舊是 color: blue？
這是為什么呢？解答一下：
這是由于 :not(p) 同樣能夠選中 <body>，那么 <body> 的 color 即變成了 blue，由于 color 是一個(gè)可繼承屬性，<p> 標(biāo)簽繼承了 <body> 的 color 屬性，導(dǎo)致看到的 <p> 也是藍(lán)色。
我們把它改成一個(gè)不可繼承的屬性，試試看：
/* Selects any element that is NOT a paragraph */ :not(p) { border: 1px solid; }
OK，這次 <p> 沒(méi)有邊框體現(xiàn)，沒(méi)有問(wèn)題！
因此，實(shí)際使用的時(shí)候，需要一定要注意樣式繼承的問(wèn)題！
（學(xué)習(xí)視頻分享：css視頻教程、web前端）
