本文详解如何使用 CSS 选择器（特别是 :not(:first-child) 和 :first-child）配合 ::before 伪元素，实现仅在除第一个子元素外的其他项中渲染分隔符，适用于响应式面包屑导航等场景。
本文详解如何使用 css 选择器（特别是 `:not(:first-child)` 和 `:first-child`）配合 `::before` 伪元素，实现仅在除第一个子元素外的其他项中渲染分隔符，适用于响应式面包屑导航等场景。
在构建响应式面包屑（Breadcrumb）导航时，一个常见需求是：移动端仅显示首个链接，且不带分隔符；桌面端显示全部链接，但分隔符（如 /）仅出现在第二项及之后的每一项前，首项前绝不出现。这看似简单，却容易因误用选择器导致样式错乱——例如对所有 .breadcrumb-item a::before 统一设 content: "/" 后，再试图“隐藏”首项的伪元素，若仅靠 content: "" 而未重置 display，仍可能因默认 inline 行内行为造成布局偏移。
✅ 正确解法：精准定位 + 显式重置
核心思路是避免“全局设置再覆盖”，改为“按需精准作用”。推荐两种等效且健壮的写法：
方案一：为非首项显式启用伪元素（推荐）
/* 移动端：仅显示首项，伪元素默认不渲染 */
.prelative ~ .breadcrumb-section .breadcrumb-item a::before {
content: "<"; /* 移动端箭头 */
padding-right: 0.5rem;
}
/* 桌面端：仅对非首项启用分隔符 */
@media (min-width: 576px) {
.prelative ~ .breadcrumb-section .breadcrumb-item a::before {
content: "/"; /* 全局设为斜杠 */
}
/* 关键：显式清除首项的伪元素内容与占位 */
.prelative ~ .breadcrumb-section .breadcrumb-item:first-child a::before {
content: "";
display: none; /* 防止空内容仍占据行内空间 */
}
}方案二：直接作用于后续兄弟项（语义更清晰）
@media (min-width: 576px) {
/* 仅对首个 breadcrumb-item 之后的所有 a 元素添加伪元素 */
.prelative ~ .breadcrumb-section .breadcrumb-item + .breadcrumb-item a::before {
content: "/";
padding-right: 0.5rem;
}
}该方案利用相邻兄弟选择器 +，天然跳过首项，无需额外清除逻辑，语义明确、可维护性强。
⚠️ 注意事项与最佳实践
- content: "" 不等于无渲染：即使内容为空，伪元素默认为 display: inline，仍会参与行内格式化，可能引发微小间距或对齐问题。务必配合 display: none 彻底移除。
- 伪元素层级与继承：::before 的 color、font-weight 等属性会继承父元素样式，若需独立控制，请在伪元素规则中显式声明。
- 移动端优先的渐进增强：当前代码已遵循移动优先原则——基础样式定义移动端行为，媒体查询内叠加桌面端增强，符合现代 CSS 开发范式。
- 无障碍考量：分隔符 / 属于纯视觉装饰，不应影响屏幕阅读器解析。确保
✅ 最终效果验证
在视口 ≥576px 时：
立即学习“前端免费学习笔记（深入）”；
- Police 链接前无任何符号；
- Police Child 链接前显示 /，且与文字间距一致；
- 若后续追加更多层级（如 Police Grandchild），其前同样自动渲染 /，无需新增 CSS 规则。
通过精准运用 CSS 选择器组合，开发者可优雅解耦样式逻辑，避免“打补丁式”覆盖，让响应式导航既稳健又易于扩展。
