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

再進行驗證

::first-line vs. tag selector

::first-line vs class selector

::first-line vs ID selector

::first-line vs !important

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

首頁

web前端

css教學

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

青灯夜游

Sep 28, 2022 pm 07:45 PM

css

見微知著，這篇文章給大家分享兩道有趣的 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 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
#看看效果：

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

::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 id=&quot;h&quot;&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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7541

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。