如何移除面包屑第一个子元素的::before伪类，保留其余元素的？

核心需求实现 #

• 移动端默认状态：仅显示第一个面包屑（<li>），该面包屑内<a>标签的::before伪类内容为'<'
• 视口宽度≥576px时：显示所有面包屑，仅移除第一个面包屑的::before伪类内容，其余面包屑保留该伪类（内容为'/'）

修改后的完整代码 #

CSS 代码

body {
  background-color: darkblue;
}

a {
  text-decoration: none;
}

.prelative ~ .breadcrumb-section {
  z-index: 1000;
}
@media (min-width: 576px) {
  .prelative ~ .breadcrumb-section {
    padding: 1rem 0;
  }
}
.prelative ~ .breadcrumb-section ol {
  margin: 0;
  padding: 0;
}
.prelative ~ .breadcrumb-section .breadcrumb {
  position: absolute;
  top: 8%;
  display: flex;
  list-style-type: none;
  padding-left: 1rem;
  justify-content: space-between;
}
@media (min-width: 1200px) {
  .prelative ~ .breadcrumb-section .breadcrumb {
    top: 10%;
    padding: 0 2.833rem;
  }
}
.prelative ~ .breadcrumb-section .breadcrumb-item {
  color: white;
  font-weight: normal; /* 替换未定义的weight(regular)函数 */
}
.prelative ~ .breadcrumb-section .breadcrumb-item + .breadcrumb-item {
  padding-left: 2rem;
}
.prelative ~ .breadcrumb-section .breadcrumb-item:not(:first-child) {
  display: none;
}
@media (min-width: 576px) {
  .prelative ~ .breadcrumb-section .breadcrumb-item:not(:first-child) {
    display: block;
  }
}
.prelative ~ .breadcrumb-section .breadcrumb-item a {
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
}
/* 移动端默认伪类样式 */
.prelative ~ .breadcrumb-section .breadcrumb-item a::before {
  font-weight: 300;
  content: "<";
  display: inline-block;
  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: "";
  }
}
.prelative ~ .breadcrumb-section .breadcrumb-item.active {
  display: none;
}

HTML 代码

<div class="prelative"></div>
<div class="breadcrumb-section">
  <nav aria-label="Full path to the current page" class="breadcrumb-wrapper">
    <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>
    </ol>
  </nav>
</div>

关键修改说明 #

1. 修正无效选择器：原代码中.breadcrumb-item a::before:first-child是错误写法，伪元素无法直接搭配:first-child使用，改为.breadcrumb-item:first-child a::before才能精准选中第一个面包屑的伪元素。
2. 修复样式报错：将weight(regular)替换为标准值normal，避免自定义函数未定义导致的样式失效。
3. 明确样式优先级：大屏下先统一设置所有面包屑伪类内容为'/'，再单独覆盖第一个面包屑的伪类内容为空，确保逻辑清晰且样式生效。

内容的提问来源于stack exchange，提问作者Millhorn