html - 转动 first::before 伪选择器？

Question

我正在尝试使用以下标记设计一个 Breadcrumb 组件；

    <nav aria-label="breadcrumb" 
        class="BreadcrumbContainer">
      <a  
        href="#"
        aria-current="page" 
        class="Breadcrumb onActive" aria-current="page">Home</a>
    </nav>

    <nav aria-label="Breadcrumb" class="BreadcrumbContainer">
      <a  
        href="#"
        class="Breadcrumb" aria-current="page">Home</a>
      <a  
        href="#"
        aria-current="page" 
        class="Breadcrumb onActive" aria-current="page">Users</a>
    </nav>

我正在分离 <a>使用 ::pseudo 的元素像这样的选择器:

.Breadcrumb::before {
  content: "/";
  padding: var(--Breadcrumb-padding);
}

然而，这将始终绘制 \在 nav 中的第一个 anchor 元素前面元素。是否可以关闭 ::before N 个 child 的第一个 child 的选择器？

Answer 1

当然，通过选择不是其 parent 第一个 child 的面包屑:

.Breadcrumb:not(:first-child)::before {
  content: "/";
  padding: var(--Breadcrumb-padding);
}

(不必要的向后兼容替代方案:

* + .Breadcrumb::before {
  content: "/";
  padding: var(--Breadcrumb-padding);
}

或者通过为第一个 child 撤销它:

.Breadcrumb::before {
  content: "/";
  padding: var(--Breadcrumb-padding);
}

.Breadcrumb:first-child {
  content: none;
}