在学习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可能插入了其他元素，例如：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<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，这样可以明确表示选择的是的任何直接子元素中的第一个子元素。
