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

来源:php中文网 | 编辑:碧海醫心 | 时间:2025-04-24

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

:first-child 选中了什么

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

<!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"><p class="highlight">这是一个带有 class="highlight" 的段落。</p>
<p id="unique">这是一个带有 id="unique" 的段落。</p>
<p>这是一个普通的段落。</p>
<p>这是另一个普通的段落。</p>

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

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

上一篇：字重400和500在网页设计中如何通过肉眼区分？

下一篇：如何在video.js 8.22版本的流式fluid模式下限制视频

标签: 　　css 　　　　html 　　　　red 　　　　为什么　　　　选择器　　