在學習css選擇器的過程中，我們常常會遇到一些看似簡單但實際效果出乎意料的情況。今天我們來探討一下 body :first-child 偽類選擇器的實際作用。
:first-child 選中了什么
在學習 :first-child 偽類時，我使用了以下語法，但結果卻與預期不符：
html 代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css選擇器學習</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>css選擇器學習示例</h1> <p class="highlight">這是一個帶有 class="highlight" 的段落。</p> <p id="unique">這是一個帶有 id="unique" 的段落。</p> <p>這是一個普通的段落。</p> <p>這是另一個普通的段落。</p> <div> <p>這是 `div` 內部的段落。</p> </div> <button>點擊我</button> </body> </html>
CSS 代碼如下：
body :first-child{ background-color: red }
按照 :first-child 的語法，body :first-child 應該選中 body 的第一個子元素，即：
<h1>CSS選擇器學習示例</h1>
然而，實際選中的卻是：
<p>這是 `div` 內部的段落。</p>
為什么會這樣呢？我們來詳細分析一下。
body :first-child 的選擇邏輯
首先，需要明確的是，body :first-child 和 body:first-child 雖然只差一個空格，但含義完全不同。我不建議使用這種容易引起歧義的選擇器。如果你想明確選擇 body 的所有子元素中的第一個，可以使用 body *:first-child。
你理解的“選中的應該是 body 的第一個子元素”是正確的。那么，為什么沒有選中
呢？我們可以通過查看網頁源碼來找到答案：
在實際的網頁源碼中，
并不是 body 的第一個子元素。在它前面，WebIDE 可能插入了其他元素。這些元素可能是開發工具或瀏覽器自動添加的。
如果你刪除這些額外的元素，你會發現 body :first-child 確實會選中
。
此外，body 只要求 是 body 的后代（Descendant），但并未要求是子元素（Child）。因此，那個
既是 body 的后代，同時它也是其父元素
的第一個子元素。因此，body *:first-child 選擇器會匹配到它。
通過這個例子，我們可以看到，CSS選擇器的實際效果可能會受到網頁結構和開發工具的影響。因此，在使用選擇器時，需要仔細檢查網頁的實際結構，并確保選擇器的語法清晰明確。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
