看看這兩個 CSS 面試題，考察你的基礎！-css教學-PHP中文網

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

青灯夜游

發布： 2022-09-28 19:53:55

轉載

2115 人瀏覽過

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

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

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

登入後複製

樣式如下：

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

登入後複製

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

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

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

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

只有再向上一層，我們找到<div> 的樣式規則，才能在最下面看到這樣一條規則：

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

再進行驗證

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

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

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

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

綜上的同時，每一段我們同時都使用了::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;
}

登入後複製

CodePen Demo -- ::first-line: demo
https://codepen.io/KittyGiraudel/pen/kWobaa/569e082a67400f5fb39a96030d0e#96c
#看看效果：

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

::first-line 高。究其原因，在於，

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

MDN -- ::first-line

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

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

在MDN 介紹

:not 的頁面，有這樣一個例子：

<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) 可以選擇任何不是 標籤的元素。然而，上面的 CSS 選擇器，在如下的 HTML 結構，實測的結果不太對勁。

<div class="code" style="position:relative; padding:0px; margin:0px;"><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&gt;h1&lt;/h1&gt;</pre><div class="contentsignin">登入後複製</div></div>

結果如下：

CodePen Demo -- :not pesudo demo

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

意思是，

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

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

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

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

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

登入後複製

OK，这次  没有边框体现，没有问题！

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

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

以上是看看這兩個 CSS 面試題，考察你的基礎！的詳細內容。更多資訊請關注PHP中文網其他相關文章！