本文详解如何使用 CSS 选择器（特别是 :not(:first-child) 和 :first-child）精准移除首个面包屑项的 ::before 伪元素，同时保留其余项的分隔符（如 /），实现响应式面包屑导航的语义化样式控制。
本文详解如何使用 css 选择器（特别是 `:not(:first-child)` 和 `:first-child`）精准移除首个面包屑项的 `::before` 伪元素，同时保留其余项的分隔符（如 `/`），实现响应式面包屑导航的语义化样式控制。
在构建响应式面包屑（Breadcrumb）导航时，一个常见需求是：移动端仅显示首个路径项（如 “Police”），而桌面端需展开全部路径（如 “Police / Police Child”），但分隔符（/）不应出现在第一项之前。这意味着 ::before 伪元素必须严格作用于“非首项”的 标签，而非全局应用后手动隐藏。
✅ 正确解法：用 :first-child 精准重置首项伪元素
核心思路不是“阻止伪元素生成”，而是“覆盖首项的 content 值”。CSS 伪元素无法被 display: none 直接隐藏（因其不占文档流），但可通过将 content 设为空字符串 "" 实现视觉移除：
/* 移动端默认：所有项显示 '<' 箭头 */
.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 a::before {
content: "/";
}
/* 关键：显式将首项的伪元素内容置空 */
.prelative ~ .breadcrumb-section .breadcrumb-item:first-child a::before {
content: "";
}
}? 注意：::before 的 content 属性是决定其是否渲染的唯一权威属性。设为 "" 后，即使保留 padding-right，该伪元素也不会占用空间或渲染内容；若需彻底消除间距，可一并重置 padding-right: 0。
⚠️ 常见误区与避坑指南
❌ 错误写法：.breadcrumb-item:not(:first-child) a::before
这看似合理，但会导致桌面端下 所有 项（包括第二项）的 ::before 在媒体查询中被重新定义两次（一次全局 /，一次 :not(:first-child) 的 /），逻辑冗余且易出错。✅ 推荐模式：全局定义 → 局部覆盖
先统一设置 ::before { content: "/" }，再用更高优先级的选择器（如 :first-child）覆盖首项。这符合 CSS 层叠原则，维护性更强。-
额外优化建议：
若首项 a::before 即使 content: "" 仍因继承 padding-right 导致布局偏移，可显式清除：.prelative ~ .breadcrumb-section .breadcrumb-item:first-child a::before { content: ""; padding-right: 0; /* 彻底消除空白 */ }
? 完整工作示例（精简版）
<div class="prelative"></div>
<div class="breadcrumb-section">
<nav aria-label="Full path to the current page">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/police">Police</a></li>
<li class="breadcrumb-item"><a href="/police/police-child">Police Child</a></li>
<li class="breadcrumb-item active">Current Page</li>
</ol>
</nav>
</div>配合上述 CSS，在 576px 断点后，渲染效果为：
Police / Police Child / Current Page
——首项无前置符号，后续每项前均有 /，语义清晰、样式可控。
✅ 总结
精准控制伪元素的显示逻辑，关键在于理解 CSS 选择器的层级关系与 content 属性的渲染机制。通过 :first-child 针对性覆盖首项伪元素内容，而非依赖复杂否定选择器，既能保证代码简洁性，又能避免响应式断点下的样式冲突。这是现代 CSS 布局中“最小干预、最大效果”的典型实践。
立即学习“前端免费学习笔记（深入）”；
