<p>今天在論壇，有看到這樣一道非常有趣的題目，簡單的程式碼如下：
<div>
<p id="a">First Paragraph</p>
</div>p#a {
color: green;
}
div::first-line {
color: blue;
}<p> 內的文字的顏色，是green 還是blue 呢？ <p>有趣的是，這裡的最終結果是藍色，也就是 color: blue 生效了。 【推薦學習：css影片教學】<p>
<p>不對，正常而言，ID 選擇器的優先權不應該比偽類別選擇器高麼？為什麼這裡反而是偽類選擇器的優先權更高呢？ <p>並且，打開調試模式，我們定位到<p> 元素上，只看到了color: green 生效，沒找到div:: first-line 的樣式定義：<p>
<p>只有再向上一層，我們找到<div> 的樣式規則，才能在最下面看到這樣一條規則：<p>
<p>因此，這裡很明顯，是<p> 標籤繼承了父元素 <div> 的這條規則，並且作用到了自身第一行元素之上，覆寫了原本的ID 選擇器內定義的color: green#。 ::first-line選擇器更低。 <p>我們再做一些簡單的嘗試：<p>下面的DEMO 展示了::first-line 樣式和各種選擇器共同作用時的優先順序對比，甚至包括了!important 規則：::first-line 選擇器。 <h2>::first-line vs. tag selector</h2> <p>This paragraph ...</p> <h2>::first-line vs class selector</h2> <p class="p2">This paragraph color i...</p> <h2>::first-line vs ID selector</h2> <p id="p3">This paragraph color is set ...</p> <h2>::first-line vs !important</h2> <p id="p4">This paragraph color is ....</p>
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;
}<p>CodePen Demo -- ::first-line: demo<p>https://codepen.io/KittyGiraudel/pen/kWobaa/569e082a67400f5fb39a96030d0e#96c #看看效果：<p><p>
可以看到，無論是什麼選擇器，優先權都沒有::first-line<p> 高。 ::before，::after 一樣，因此，對於父元素的color 規則，對於它而言只是一種級聯關係，透過: :first-line 本身定義的規則，優先順序會更高！ 
再來一題，MDN 的錯誤範例？一個有趣的現象<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">/* Selects any element that is NOT a paragraph */
:not(p) {
color: blue;
}</pre><div class="contentsignin">登入後複製</div></div>意思是，:not(p)<p> 可以選擇任何不是<p> 標籤的元素。然而，上面的 CSS 選擇器，在如下的 HTML 結構，實測的結果不太對勁。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><p>p</p>
<div>div</div>
<span>span</span>
<h1>h1</h1></pre><div class="contentsignin">登入後複製</div></div>結果如下：<p><p>
CodePen Demo -- :not pesudo demo<p>https://codepen.io/ Chokcoco/pen/KKZbWjy<p>意思是，:not(p)<p> 仍然可以選取
<p> 元素。是的，在多個瀏覽器，得到的效果都是一致的。 color: blue？ :not(p) 同样能够选中 <body>，那么 <body> 的 color 即变成了 blue，由于 color 是一个可继承属性，<p> 标签继承了 <body> 的 color 属性，导致看到的 <p> 也是蓝色。<p>我们把它改成一个不可继承的属性，试试看：/* Selects any element that is NOT a paragraph */
:not(p) {
border: 1px solid;
}
<p>OK，这次 <p> 没有边框体现，没有问题！
<p>因此，实际使用的时候，需要一定要注意样式继承的问题！
<p>（学习视频分享：css视频教程、web前端）以上是看看這兩個 CSS 面試題，考察你的基礎！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
