本文详解如何通过 CSS 选择器（如 :first-child 结合 ::before）仅对非首项 breadcrumb 添加分隔符，确保移动端仅显示首项、桌面端显示全部且首项无前置符号。
本文详解如何通过 css 选择器（如 `:first-child` 结合 `::before`）仅对非首项 breadcrumb 添加分隔符，确保移动端仅显示首项、桌面端显示全部且首项无前置符号。
在响应式面包屑（breadcrumb）导航中，一个常见需求是：移动端只显示第一个导航项（如 “Police”），并用 。
关键难点在于：::before 伪元素默认作用于所有匹配元素，若直接为 .breadcrumb-item a::before 设置 content: "/"，首项也会被渲染，破坏语义与视觉一致性。正确解法是利用结构化伪类精准定位并覆盖首项的伪元素。
✅ 正确实现方式
只需在媒体查询内添加一行 CSS，即可移除首项的 ::before 内容：
@media (min-width: 576px) {
.prelative ~ .breadcrumb-section .breadcrumb-item:first-child a::before {
content: "";
}
}该规则优先级高于通用声明（.breadcrumb-item a::before），且精准命中第一个 .breadcrumb-item 下的 元素的 ::before 伪元素，将其内容置为空字符串。注意：content: "" 是必需的——仅设 display: none 对伪元素无效（CSS 规范明确要求伪元素必须有 content 才可渲染，设为 "" 即使其“存在但不可见”，同时不占用布局空间）。
立即学习“前端免费学习笔记（深入）”；
? 完整样式逻辑梳理（精简版）
以下为关键 CSS 片段，体现响应式行为流：
/* 移动端：仅首项可见，所有链接前显示 "<" */
.prelative ~ .breadcrumb-section .breadcrumb-item a::before {
content: "<";
display: inline-block;
padding-right: 0.5rem;
}
/* 桌面端（≥576px）：显示所有非首项，并切换分隔符为 "/" */
@media (min-width: 576px) {
.prelative ~ .breadcrumb-section .breadcrumb-item:not(:first-child) {
display: block;
}
.prelative ~ .breadcrumb-section .breadcrumb-item a::before {
content: "/";
}
/* ? 关键：强制首项伪元素为空 */
.prelative ~ .breadcrumb-section .breadcrumb-item:first-child a::before {
content: "";
}
}⚠️ 注意事项与最佳实践
- 不要使用 display: none 隐藏伪元素：::before/::after 不支持 display: none（除非配合 content: none，但 none 非标准值）。唯一可靠方式是 content: ""。
- 选择器权重需足够：确保 .breadcrumb-item:first-child a::before 规则位于通用 a::before 规则之后，或添加必要权重（如本例中已通过更具体的选择器自然提升优先级）。
- 语义优于视觉：隐藏首项分隔符不仅为美观，更是遵循面包屑“路径起点无前置分隔”的无障碍惯例（ARIA aria-label 应保持逻辑清晰）。
- 扩展性考虑：若未来增加更多层级（如三级：Police / Police Child / Detail），当前方案仍适用——:first-child 始终精准捕获最左项，其余自动继承 /。
✅ 总结
精准控制伪元素的显示逻辑，核心在于结合结构伪类（:first-child, :not(:first-child)）与响应式断点，用 content: "" 主动清空目标伪元素内容。这比 JavaScript 操作更轻量、更符合 CSS 设计哲学，也完全满足 WCAG 对静态内容可预测性的要求。实际项目中，建议将此类规则封装为 BEM 命名的修饰符（如 .breadcrumb--desktop），提升可维护性。
