本文详解如何在响应式面包屑导航中，仅对非首项（即第二项及之后）应用 ::before 伪元素（如分隔符 /），而彻底隐藏首项的该伪元素，避免冗余内容与布局干扰。
本文详解如何在响应式面包屑导航中，仅对非首项（即第二项及之后）应用 `::before` 伪元素（如分隔符 `/`），而彻底隐藏首项的该伪元素，避免冗余内容与布局干扰。
在构建移动端优先的面包屑（Breadcrumb）组件时，一个常见需求是：小屏下仅显示首个导航项（如“Police”），大屏下展开全部项（如“Police / Police Child”），且分隔符仅出现在后续项之前——即“/”应出现在第二项 的左侧，而非第一项。此时，若直接为所有 .breadcrumb-item a::before 设置 content: "/"，首项也会错误渲染一个前置斜杠，破坏语义与视觉一致性。
正确解法是利用 CSS 选择器的精确性，单独重置首项链接的伪元素内容为空，并确保其不占用空间：
/* 小屏：默认仅显示首项，所有后续项隐藏 */
.prelative ~ .breadcrumb-section .breadcrumb-item:not(:first-child) {
display: none;
}
/* 大屏（≥576px）：显示全部非首项 */
@media (min-width: 576px) {
.prelative ~ .breadcrumb-section .breadcrumb-item:not(:first-child) {
display: block;
}
/* 统一为所有链接添加分隔符 */
.prelative ~ .breadcrumb-section .breadcrumb-item a::before {
content: "/";
font-weight: 300;
display: inline-block;
padding-right: 0.5rem;
}
/* 关键：显式清除首项链接的伪元素 */
.prelative ~ .breadcrumb-section .breadcrumb-item:first-child a::before {
content: "";
display: none; /* 推荐双保险：content为空 + display:none */
}
}✅ 为什么用 :first-child 而非 :nth-child(1)？
:first-child 语义更清晰，且兼容性极佳（IE9+）。它精准匹配作为父元素第一个子元素的 .breadcrumb-item，完全符合业务场景中“仅首项需特殊处理”的需求。
⚠️ 重要注意事项：
- 避免使用 visibility: hidden 或 opacity: 0 —— 它们仍会占据渲染空间，可能导致 padding-right 引发意外空白；
- display: none 是最佳实践，既移除内容又释放布局空间；
- 若需支持旧版浏览器（如 IE11），请确保 ::before 伪元素的 display 值与父级 a 的 display: flex 兼容（现代写法中 inline-block 安全可靠）；
- 建议将该规则置于媒体查询内部，避免小屏下无谓的样式计算。
最终效果：
- 移动端（Police，无任何前置符号；
- 桌面端（≥576px）：显示 Police / Police Child，其中 / 仅作为第二项 的 ::before 内容，首项干净无痕。
此方案简洁、可维护性强，是响应式导航中控制伪元素层级显示的标准化实践。
