建站
咨詢
售后
建站咨詢
新聞中心
今天在論壇，有看到這樣一道非常有意思的題目，簡單的代碼如下：
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比農(nóng)安網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式農(nóng)安網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋農(nóng)安地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。
First Paragraph
樣式如下：
p#a {
color: green;
}
div::first-line {
color: blue;
}試問，標(biāo)簽
內(nèi)的文字的顏色，是 green 還是 blue 呢？
有趣的是，這里的最終結(jié)果是藍(lán)色，也就是 color: blue 生效了。
不對，正常而言，ID 選擇器的優(yōu)先級不應(yīng)該比偽類選擇器高么？為什么這里反而是偽類選擇器的優(yōu)先級更高呢？
并且，打開調(diào)試模式，我們定位到
? 元素上，只看到了 color: green? 生效，沒找到 div::first-line 的樣式定義：
只有再向上一層，我們找到
因此，這里很明顯，是**
? 標(biāo)簽繼承了父元素
再進(jìn)行驗(yàn)證
這里，另外一個(gè)比較迷惑的點(diǎn)在于，為什么 ID 選擇器的優(yōu)先級比 ::first-line 選擇器更低。
我們再做一些簡單的嘗試：
下面的 DEMO 展示了 ::first-line 樣式和各種選擇器共同作用時(shí)的優(yōu)先級對比，甚至包括了 !important 規(guī)則：
- 第 1 段通過標(biāo)簽選擇器設(shè)置為灰色。
- 第 2 段通過類選擇器設(shè)置為灰色。
- 第 3 段通過 ID 選擇器設(shè)置為灰色。
- 第 4 段通過 !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[1]。
看看效果：
可以看到，無論是什么選擇器，優(yōu)先級都沒有 ::first-line 高。
究其原因，在于，::first-line? 其實(shí)是個(gè)偽元素而不是一個(gè)偽類，被其選中的內(nèi)容其實(shí)會(huì)被當(dāng)成元素的子元素進(jìn)行處理，類似于 ?::before?，?::after? 一樣，因此，對于父元素的 color 規(guī)則，對于它而言只是一種級聯(lián)關(guān)系，通過 ?::first-line? 本身定義的規(guī)則，優(yōu)先級會(huì)更高！?
這也是為什么，在 MDN 文檔中，更推薦的是雙冒號的寫法（當(dāng)然瀏覽器都支持單冒號的寫法）-- MDN -- ::first-line[2]。
再來一題，MDN 的錯(cuò)誤例子？一個(gè)有意思的現(xiàn)象
說完上面這題。我們再來看看一題，非常類似的題目。
在 MDN 介紹 :not 的頁面，有這樣一個(gè)例子：
/* Selects any element that is NOT a paragraph */
:not(p) {
color: blue;
}
意思是，:not(p) 可以選擇任何不是
標(biāo)簽的元素。然而，上面的 CSS 選擇器，在如下的 HTML 結(jié)構(gòu)，實(shí)測的結(jié)果不太對勁。
p
div
spanh1
結(jié)果如下：
?CodePen Demo -- :not pesudo demo[3]。
意思是，:not(p)? 仍然可以選中
元素。是的，在多個(gè)瀏覽器，得到的效果都是一致的。
看到這里，你可以再停一下，思考一下，為什么
? 元素的顏色仍舊是 color: blue？
這是為什么呢？解答一下：
這是由于 :not(p)? 同樣能夠選中 ?
?，那么 ?? 的 color 即變成了 ?blue?，由于 ?color? 是一個(gè)可繼承屬性，?? 標(biāo)簽繼承了 ?
? 的 color 屬性，導(dǎo)致看到的 ?? 也是藍(lán)色。
我們把它改成一個(gè)不可繼承的屬性，試試看：
/* Selects any element that is NOT a paragraph */
:not(p) {
border: 1px solid;
}
OK，這次
沒有邊框體現(xiàn)，沒有問題！
因此，實(shí)際使用的時(shí)候，需要一定要注意樣式繼承的問題！
最后
本文到此結(jié)束，希望對你有幫助 ????
參考資料
[1]CodePen Demo -- ::first-line: demo: https://codepen.io/KittyGiraudel/pen/kWobaa/569e082a67400f5fb39a96030d0e9b6c。
[2]MDN -- ::first-line: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line。
[3]CodePen Demo -- :not pesudo demo: https://codepen.io/Chokcoco/pen/KKZbWjy。
[4]Github -- iCSS: https://github.com/chokcoco/iCSS。
網(wǎng)頁題目：兩道超有意思的CSS面試題，試試你的基礎(chǔ)
本文地址：http://www.dlmjj.cn/article/copocps.html
