body :first-child选择器为什么会选中意料之外的元素？-css教程-PHP中文网

body :first-child选择器为什么会选中意料之外的元素？

碧海醫心

发布： 2025-04-24 20:32:01

原创

732人浏览过

在学习css选择器时，我们经常会遇到一些意想不到的结果。今天我们将深入探讨body :first-child选择器的具体作用和选择逻辑。

:first-child 选中了什么

当我们使用如下HTML和CSS代码时：

<code><!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>
<pre class="brush:php;toolbar:false;"><code><p class="highlight">这是一个带有 class="highlight" 的段落。</p>
<p id="unique">这是一个带有 id="unique" 的段落。</p>
<p>这是一个普通的段落。</p>
<p>这是另一个普通的段落。</p>

<div>
    <p>这是 `div` 内部的段落。</p>
</div>

<a href="#">点击我</a></code>

登录后复制

</body> </html>

<code>body :first-child {
background-color: red
}</code>

登录后复制

我们期望body :first-child选择器选中<body>的第一个子元素，即<h1>CSS选择器学习示例</h1>。然而，实际选中的却是<div>内部的<p>元素。

选择逻辑分析

首先，需要明确的是，body :first-child和body:first-child是完全不同的选择器。前者在body和:first-child之间有一个空格，这意味着:first-child选择器会作用于body的后代元素，而不是body本身的子元素。

阿里妈妈·创意中心

阿里妈妈营销创意中心

查看详情

其次，我们需要检查HTML源码。通过F12查看网页源码，我们会发现<h1>并不是<body>的第一个子元素。在之前，WebIDE可能插入了其他元素，例如：

<code><!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>
...
</body>
</html></code>

登录后复制

这些插入的元素导致<h1>并不是<body>的第一个子元素。

最后，body :first-child选择器会匹配<body>的任何后代元素，只要这些后代元素是其父元素的第一个子元素。在这个例子中，<div>内部的<p>元素是其父元素的第一个子元素，因此被选中并应用了样式。

为了避免这种歧义，建议使用更明确的选择器，例如body > *:first-child，这样可以明确表示选择的是<body>的任何直接子元素中的第一个子元素。

body :first-child选择器为什么会选中意料之外的元素？