Переопределить элементы псевдокласса bootstrap - PullRequest
Новая
       3

Переопределить элементы псевдокласса bootstrap

1 голос
/ 01 февраля 2020 

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>

Приведенный выше код относится к bootstrap хлебным крошкам. В приведенном выше коде S CSS я пытался изменить псевдо элемент содержимого "/" в ">>", но код не работает для меня.

Если я удаляю &:not(:first-child) раздел, он работает. Но я не хочу, чтобы ">>" отображалось для первого элемента.

1 Ответ

1 голос
/ 01 февраля 2020

По умолчанию bootstrap nav имеет больше определенных c стилей, чем ваш. Там написано так в scss: 

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

Проверьте демо здесь .

...