Свойство CSS Color не применяется к .active (Bootstrap 4)

Я построил очень простую панель навигации в bootstrap 4. Моя цель - сделать font-color из .active class черным, чтобы показать, на какой странице пользователь находится в данный момент.

Как ни странно, класс .active применяется к таким свойствам, как font-weight, border, background or text-decoration, но НЕ color.

Вот ручка:

<p data-height = "265" data-theme-id = "0" data-slug-hash = "pVOoXr" data-default-tab = "html,result" data-user = "fdhu" data-embed-version = "2" data-pen-title = "color-property-issue" class = "codepen">See the Pen <a href = "https://codepen.io/fdhu/pen/pVOoXr/">color-property-issue</a> by ferdinand huber (<a href = "https://codepen.io/fdhu">@fdhu</a>) on <a href = "https://codepen.io">CodePen</a>.</p>
<script async src = "https://static.codepen.io/assets/embed/ei.js"></script>

Кто-нибудь может мне подсказать, как это решить?

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <title>color property issue</title>
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity = "sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin = "anonymous">
    <style>

.active {
  font-weight: bold; /*applies*/
  border: 2px solid red; /*applies*/
  background: yellow; /*applies*/
  text-decoration: underline; /*applies*/

  color: black; /*doesn't apply, neither by adding !important*/
 }
    </style>
</head>

<body>

<nav class = "navbar navbar-expand">      
  <div class = "navbar-nav">
    <div class = "nav-item active">
      <a class = "nav-link" href = "#">Link-1</a>
    </div>
   <div class = "nav-item">
      <a class = "nav-link" href = "#">Link-2</a>
    </div> 
  </div>
</nav>

</body>
</html>

html css

15.05.2018 13:32

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

141

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

просто дайте вам propertycolor:#000!important;important свойство, дайте активный класс вашему тегу привязки.

15.05.2018 13:36

Придайте цвет тегу привязки <a>. Поскольку гиперссылки принимают цвет по умолчанию, а также переопределяют родительский .active

.active a {    
  color: black;
 }

P.S. Мне также было интересно, почему это происходит только с «цветом», а не с «подчеркиванием», которое также по умолчанию установлено в <a>. Думаю, причина в том, что код построен на Bootstrap. Reboot.css в bootstrap по умолчанию удаляет подчеркивание для <a>.

— 15.05.2018 16:05

Да, bootstrap удаляет подчеркивание для тегов <a> :)

— 15.05.2018 16:41

15.05.2018 13:36

Ответ принят как подходящий

Цвет По умолчанию блока ссылка на сайт имеет приоритет над цветом унаследованный блока div.

Вам нужно сделать селектор более конкретным, чтобы он применялся к самой ссылке.

.active a {
  font-weight: bold;
  border: 2px solid red;
  background: yellow;
  text-decoration: underline;
  color: black;
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity = "sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin = "anonymous">

<nav class = "navbar navbar-expand">
  <div class = "navbar-nav">
    <div class = "nav-item active">
      <a class = "nav-link" href = "#">Link-1</a>
    </div>
    <div class = "nav-item">
      <a class = "nav-link" href = "#">Link-2</a>
    </div>
  </div>
</nav>

15.05.2018 13:36

Вам нужно сделать класс .active a в вашем css

.active {
   font-weight: bold; /*applies*/
   border: 2px solid red; /*applies*/
   background: yellow; /*applies*/
   text-decoration: underline; /*applies*/
   color: black; /*doesn't apply, neither by adding !important*/
 }
     
.active a {
   color: #000;
 }

<nav class = "navbar navbar-expand">      
  <div class = "navbar-nav">
    <div class = "nav-item active">
      <a class = "nav-link" href = "#">Link-1</a>
    </div>
   <div class = "nav-item">
      <a class = "nav-link" href = "#">Link-2</a>
    </div> 
  </div>
</nav>

15.05.2018 13:39

Другие вопросы по теме

Как изменить курсор для отключенных кнопок <button> или <a> в Bootstrap 4?

Исходная карта в исходный файл SCSS

Градиентное фоновое изображение на существующем фоновом изображении

Фоновое изображение Base64 было преобразовано в относительный путь на сервере

Laravel не находит файл css: GET http: // localhost: 8000 / cssFile net :: ERR_ABORTED

Как установить глобальный шрифт - CSS

Наложение курсора кнопки виджета Woocommerse minicart

Фоновое изображение в css не работает должным образом

Исправить автоматическое расширение высоты сетки CSS с помощью складного div

Как получить элемент DOM из события касания?

Свойство CSS Color не применяется к .active (Bootstrap 4)

Ответы 4

Другие вопросы по теме

Похожие вопросы