温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - Override pseudo class elements bootstrap
css html sass twitter-bootstrap

html - 覆盖伪类元素引导

发布于 2020-04-10 17:24:49

nav {
  ol.breadcrumb {
    background-color: unset;

    .breadcrumb-item {
      a {
        color: #0a0a0a;

        &:hover {
          color: #0a0a0a;
          text-decoration: underline;
        }
      }
      &:before {
        &:not(:first-child){
          content: ">>" !important;
        }
      }
    }    
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

上面的代码是自举式面包屑。在上面的SCSS代码中,我尝试将元素内容“ /”更改为“ >>”,但是该代码对我不起作用。

如果我删除&:not(:first-child)部分,它的工作原理。但是我不希望第一个元素出现“ >>”。

查看更多

提问者
Pawan Rai
被浏览
55
johannchopin 2020-02-02 01:46

默认的引导程序nav具有比您更特定的样式。像这样写scss

nav {
  ol.breadcrumb {
    .breadcrumb-item {
      & + .breadcrumb-item {
        &::before {
          content: ">>" !important;
        }
      }
    }
  }
}

此处查看演示