Question

我正在尝试设计带有以下标记的面包屑组件；

    <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。是否可以关闭N个孩子的第一个孩子的::before选择器？

Answer 1

当然，通过选择不是父母的第一个孩子的面包屑：

docker run --rm --link stikdb:stikdb --network bridge -e STIKKED_ENABLE_CAPTCHA=false -e STIKKED_BASE_URL=http://192.168.0.50:9999/ -e STIKKED_DB_HOSTNAME=stikdb -e STIKKED_DB_DATABASE=stikdb -e STIKKED_DB_USERNAME=stikuser -e STIKKED_DB_PASSWORD=stikpassword -p 9999:80 stikked

（不必要的向后兼容替代方法：

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

或者通过取消对第一个孩子的使用：

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

转向第一个:: before伪选择器？

1 个答案: