解决 `:first-child` / `:last-child` 不生效的问题

在开发 Vue 或小程序项目时，我们经常会使用 CSS 伪类选择器 :first-child 和 :last-child 来选中某个容器内的第一个或最后一个子元素。然而，有时你会发现这两个选择器并没有按预期工作。本文将通过一个典型示例，分析原因并提供几种可靠的解决方案。

问题现象

假设我们有如下模板结构（以小程序为例，Vue 类似）：

<view class="title">
    <view>{{ siteName || '场地名称' }}</view>
    <view>（{{ distributorName || '运营商名称' }}）</view>
</view>

我们想分别对两个 <view> 设置不同的样式，于是编写了这样的 CSS：

.title view:first-child {
    font-size: 18px;
    color: #333;
}

.title view:last-child {
    font-size: 14px;
    color: #999;
}

但运行后发现样式并没有应用，或者只有其中一个生效。这是为什么呢？

常见原因分析

1. 选择器写错了目标

初学者容易写成：

.title:first-child { ... }  /* 错误：这会选中作为第一个子元素的 .title 本身 */
.title:last-child { ... }   /* 错误：这会选中作为最后一个子元素的 .title 本身 */

应该选中 .title 内部 的 <view> 元素。

2. 空白节点干扰了 :first-child / :last-child

在 HTML 或类 XML 模板（如 Vue、小程序）中，标签之间的换行或空格 有时会被解析为文本节点 。

例如上面的模板，在第一个 <view> 之前可能存在换行和缩进，这个空白文本节点就成为了 .title 的第一个子节点。因此，第一个 <view> 不再是父元素的第一个子元素，view:first-child 自然匹配不到它。

3. 父元素内部还有其他隐藏元素

如果 .title 内除了两个 <view> 之外，还有注释节点、其他标签或条件渲染残留的空文本节点，也会影响 :first-child / :last-child 的计数。

4. CSS 优先级或加载问题

样式被其他更高优先级的规则覆盖，或者样式文件未正确引入，也可能导致看起来"不生效"。

解决方案

方案一：正确使用子选择器（但无法避免空白节点问题）

确保选中 .title 的直接子元素 <view>：

.title > view:first-child { ... }
.title > view:last-child { ... }

但如果存在空白节点，这个方案依然无效，因为 view 依然不是第一个子元素。

方案二：使用 :first-of-type / :last-of-type

这两个伪类会忽略其他类型的节点，只针对同种标签（<view>）进行计数，即使有空白节点也能正确匹配：

.title > view:first-of-type { ... }   /* 选中第一个 <view> 元素（忽略文本节点） */
.title > view:last-of-type { ... }    /* 选中最后一个 <view> 元素 */

这是最简单的修改方式，无需改动模板。

方案三：给 <view> 添加明确的类名（推荐）

最稳妥、最语义化的方法是为每个元素添加类名：

<view class="title">
    <view class="title-name">{{ siteName || '场地名称' }}</view>
    <view class="title-distributor">（{{ distributorName || '运营商名称' }}）</view>
</view>

.title-name {
    font-size: 18px;
    color: #333;
}

.title-distributor {
    font-size: 14px;
    color: #999;
}

这种方法彻底摆脱了对子元素顺序和空白节点的依赖，代码可读性和可维护性也更高。

方案四：检查并清理模板结构

• 确保 .title 内部只有两个 <view>，没有其他元素或文本节点。
• 如果使用 Vue 的 v-if / v-for，确保渲染后结构符合预期。
• 可以借助浏览器开发者工具检查实际 DOM 结构，确认空白节点的存在。

总结与最佳实践

方案	优点	缺点
:first-of-type / :last-of-type	无需改动模板，快速修复	依赖标签类型，如果内部有其他同类型标签则失效
添加类名	最稳定、语义化	需要增加类名，稍微多写一点代码
清除空白节点	彻底解决	可能影响代码可读性，且在一些框架中无法完全避免

在实际开发中，推荐优先使用"添加类名"的方式，这是最符合 BEM 等命名规范的做法，也能让样式与结构解耦，避免伪类带来的意外问题。

如果你因为某些原因必须使用伪类，建议使用 :first-of-type 和 :last-of-type，它们对模板中的空白节点有更好的容忍度。

---

希望本文能帮助你彻底理解 :first-child / :last-child 失效的原因，并掌握正确的处理姿势。如果还有疑问，欢迎留言讨论！