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

:first-child 选中了什么

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

<code>


    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器学习</title>
<link rel="stylesheet" href="styles.css">
<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>

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

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

选择逻辑分析

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

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

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<code>


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器学习</title>
<link rel="stylesheet" href="styles.css">
<!-- 这里可能有其他插入的元素 --><h1>CSS选择器学习示例</h1>
...

</code>

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

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

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