:first-child选中父元素第一个子元素且类型必须匹配，而:first-of-type选中父元素下首个指定类型元素；二者功能不同，:first-child等价于:nth-child(1)。
要只选中某个父元素下的第一个子元素，用 :first-child 是最直接的方式，但要注意它匹配的是“父元素的第一个子节点”，且**必须是该类型元素**（比如你想选第一个 <p></p>，但它前面有个 <h2></h2>，那这个 <p></p> 就不是 :first-child）。
:first-child 会选中同时满足两个条件的元素：
例如：
此时 p:first-child 不会匹配任何 <p></p>，因为第一个子元素是 <h2></h2>，不是 <p></p>。
如果目标是“父容器中第一个出现的某类元素”，而不是“绝对第一个子元素”，推荐用 :first-of-type：
p:first-of-type → 选中父元素下第一个 <p></p>，不管前面有没有其他标签
<li>
li:first-of-type → 选中列表中第一个 <li>，即使它前面有注释或空格文本节点也不影响（浏览器会忽略纯空白文本节点）
div > *:first-child { outline: 2px solid red; } 快速验证是否命中
<li>想排除首行特殊样式？比如导航栏第一个菜单项不加左边距：.nav-item:first-child { margin-left: 0; }
:first-child 和 :nth-child(1) 在功能上完全等价，都是指“第一个子元素”。但 :first-child 更语义清晰、书写更简短，推荐优先使用它。
以上就是css如何只选中第一个子元素_使用:first-child选择器精确匹配的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
948
收藏
