:first-child始终匹配直接父元素的第一个子元素，与嵌套层级无关；:first-of-type则匹配每个父元素下同类型首个元素，二者语义不同。
嵌套结构里 :first-child 匹配到内层元素？
因为 :first-child 永远只看「直接父元素」的第一个子节点，不关心你心里想选哪一层。比如 ul li:first-child a，如果 ul 里面还套了个 ul，那内层 ul 的第一个 li 也会被匹配——只要它在自己那个 ul 里排第一。
常见错误现象：
– 明明只想样式化最外层列表的第一项，结果子菜单里第一个链接也被加粗了
– 组件库中多个 Card 嵌套时，每个卡片内部的 header 都被当成“第一个”处理
- 用子选择器
>锁定层级：ul > li:first-child > a，这样就不会穿透进嵌套的ul - 如果结构动态生成、层级不可控，优先加
data-first属性，写li[data-first] a，比依赖 DOM 位置更可靠 - 避免用注释或空格开头的模板写法（如 Vue/React 中
{/* header */}或换行缩进），它们会生成文本节点，让目标元素失去“第一个”身份
:first-child 和 :first-of-type 在嵌套中行为差异大吗？
差异非常大，而且不是性能或兼容性问题，是语义根本不同。前者认“位置”，后者认“类型+顺序”。在嵌套场景下，:first-of-type 更容易误判，因为它只管同标签中谁先出现，不管嵌套深度。
举个例子：<ul>
<li>A</li>
<li>B</li>
<ul><li>C</li></ul>
</ul>li:first-of-type 会匹配 A 和 C —— 因为它们分别是各自父 ul 下第一个 li；而 li:first-child 只匹配 A（它是外层 ul 的第一个子元素）。
- 想选“整个结构中第一个
li”，且确定它在 DOM 顶层：用:first-child+ 子选择器 - 想选“每个
ul下第一个li”，且允许跨嵌套：用:first-of-type，但得接受它不区分层级 - 如果组件由第三方库渲染（比如 Ant Design 的
Menu），DOM 结构可能含div、span等包裹层，此时:first-child很可能完全失效，:first-of-type也靠不住——直接加 class 最稳
JS 动态插入后 :first-child 失效怎么办？
不是选择器坏了，是插入逻辑没对齐 DOM 顺序。比如用 innerHTML 批量插入多个 li，但没包在 ul 里，或者插入后第一个子节点其实是 textNode（比如带换行的字符串）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 检查插入后的实际 DOM：打开开发者工具，展开父容器，数子节点（注意灰色的 “#text” 节点）
- 改用
appendChild或insertAdjacentElement显式控制插入位置，避免隐式文本节点干扰 - 若必须用字符串插入，清理首尾空白：
html.trim()再赋值，或用document.createElement构造后 append - 极端情况（如 SSR + hydration 后结构微调），别赌 CSS 伪类，用 JS 插入时直接加
class="is-first"
Flex/Grid 容器里 :first-child 还按 DOM 顺序吗？
按。绝对按。CSS 布局方式（display: flex 或 grid）不改变 DOM 树，所以 :first-child 判断依据始终是 HTML 源顺序，不是视觉顺序。
容易踩的坑：
– 用了 order: -1 把某个子项提到最前，但它在 DOM 里仍是第二个，:first-child 不会选它
– grid-template-areas 重排了位置，但 DOM 顺序没变，:first-child 还是指原始第一个子元素
– flex-direction: column-reverse 让第一个子元素显示在底部，但样式依然作用于它
- 视觉顺序 ≠ DOM 顺序，这是所有伪类选择器的底层前提
- 如果业务逻辑真要按视觉顺序选“第一个可见项”，纯 CSS 无解，得用 JS 配合
getBoundingClientRect()或IntersectionObserver - 别为了绕开这个限制去滥用
:nth-child(1)—— 它和:first-child在匹配逻辑上完全等价
真正难的不是记住规则，而是每次写选择器前，先打开开发者工具看一眼父元素的子节点列表。DOM 结构才是唯一真相，其他都是幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
