看看這兩個 CSS 面試題，考察你的基礎！

見微知著，這篇文章給大家分享兩道有趣的 CSS 面試題，考察考察你的基礎！

今天在論壇，有看到這樣一道非常有趣的題目，簡單的程式碼如下：

<div>
    <p id="a">First Paragraph</p>
</div>

樣式如下：

p#a {
    color: green;
}
div::first-line {
    color: blue;
}

試問，標籤<p></p> 內的文字的顏色，是green 還是blue 呢？

有趣的是，這裡的最終結果是藍色，也就是 color: blue 生效了。 【推薦學習：css影片教學】

不對，正常而言，ID 選擇器的優先權不應該比偽類別選擇器高麼？為什麼這裡反而是偽類選擇器的優先權更高呢？

並且，打開調試模式，我們定位到<p></p> 元素上，只看到了color: green 生效，沒找到div:: first-line 的樣式定義：

只有再向上一層，我們找到

的樣式規則，才能在最下面看到這樣一條規則：

因此，這裡很明顯，是<p></p> 標籤繼承了父元素 <div> 的這條規則，並且作用到了自身第一行元素之上，覆寫了原本的ID 選擇器內定義的<code>color: green#。

再進行驗證

這裡，另一個比較迷惑的點在於，為什麼ID 選擇器的優先權比::first-line選擇器更低。

我們再做一些簡單的嘗試：

下面的DEMO 展示了::first-line 樣式和各種選擇器共同作用時的優先順序對比，甚至包括了!important 規則：

• 第1 段透過標籤選擇器設定為灰色
• 第2 段透過類別選擇器設定為灰色
• 第3 段透過ID 選擇器設定為灰色
• 第4 段透過!important bash 設定為灰色

綜上的同時，每一段我們同時都使用了::first-line 選擇器。

<h2 id="first-line-nbsp-vs-nbsp-tag-nbsp-selector">::first-line vs. tag selector</h2>
<p>This paragraph ...</p>  

<h2 id="first-line-nbsp-vs-nbsp-class-nbsp-selector">::first-line vs class selector</h2>
<p class="p2">This paragraph color i...</p>  

<h2 id="first-line-nbsp-vs-nbsp-ID-nbsp-selector">::first-line vs ID selector</h2>
<p id="p3">This paragraph color is set ...</p>  

<h2 id="first-line-nbsp-vs-nbsp-important">::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;
}

CodePen Demo -- ::first-line: demo

https://codepen.io/KittyGiraudel/pen/kWobaa/569e082a67400f5fb39a96030d0e#96c

#看看效果：

<p></p>

可以看到，無論是什麼選擇器，優先權都沒有

::first-line

高。 究其原因，在於，

::first-line 其實是個偽元素而不是一個偽類，被其選中的內容其實會被當成元素的子元素進行處理，類似於::before，::after 一樣，因此，對於父元素的color 規則，對於它而言只是一種級聯關係，透過: :first-line 本身定義的規則，優先順序會更高！ 這也是為什麼，在MDN 文件中，更推薦的是雙冒號的寫法（當然瀏覽器都支援單冒號的寫法）--

MDN -- ::first-line

再來一題，MDN 的錯誤範例？一個有趣的現象

說完上面這題。我們再來看看一題，非常類似的題目。

在MDN 介紹

:not

的頁面，有這樣一個例子：<pre class='brush:php;toolbar:false;'>/* Selects any element that is NOT a paragraph */ :not(p) { color: blue; }</pre>意思是，

:not(p)

可以選擇任何不是<p></p> 標籤的元素。然而，上面的 CSS 選擇器，在如下的 HTML 結構，實測的結果不太對勁。 <pre class='brush:php;toolbar:false;'>&lt;p&gt;p&lt;/p&gt; &lt;div&gt;div&lt;/div&gt; &lt;span&gt;span&lt;/span&gt; &lt;h1 id=&quot;h&quot;&gt;h1&lt;/h1&gt;</pre>結果如下：

<p></p>

CodePen Demo -- :not pesudo demo

https://codepen.io/ Chokcoco/pen/KKZbWjy

<p></p>意思是，

:not(p)

仍然可以選取<p></p> 元素。是的，在多個瀏覽器，得到的效果都是一致的。 看到這裡，可以再停一下，思考一下，為什麼

<p></p>

元素的顏色仍舊是 color: blue？ 這是為什麼呢？解答一下：

这是由于 :not(p) 同样能够选中 ，那么 的 color 即变成了 blue，由于 color 是一个可继承属性，<p></p> 标签继承了 的 color 属性，导致看到的 <p></p> 也是蓝色。

我们把它改成一个不可继承的属性，试试看：

/* Selects any element that is NOT a paragraph */
:not(p) {
  border: 1px solid;
}

OK，这次 <p></p> 没有边框体现，没有问题！

因此，实际使用的时候，需要一定要注意样式继承的问题！

（学习视频分享：css视频教程、web前端）