Исключить класс из свойства CSS: not () не работает - PullRequest
Новая
       1

Исключить класс из свойства CSS: not () не работает

0 голосов
/ 07 октября 2018

Я пытаюсь сделать так, чтобы все ссылки на веб-странице выглядели определенным образом.Однако это не должно относиться к ссылкам навигационной панели.Я пытался исключить навигационную панель, используя a:not(.navbar), однако это не сработало: стиль применяется ко всем ссылкам, включая Link 1 в навигационной панели:

html : 

<body>
  <div class=".navbar">     
    <a href="#">Link 1</a>
  </div>      
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>   
</body>

css : 

body a:not(.navbar)  {
    font-size: 100%;
    color: black;       
    text-decoration: none !important;
    border-bottom: 6px solid red;   
}


body a:not(.navbar):hover  {
    border-bottom: none;
    background-color: #80b3ff;
    color: white;    
    text-decoration: none !important;
}

codepen

1 Ответ

0 голосов
/ 07 октября 2018

Класс .navbar применяется к контейнеру DIV панели навигации (не к ссылкам), поэтому ваши селекторы должны быть 

div:not(.navbar) a { ... }

и 

div:not(.navbar) a:hover

НОвам нужен контейнер div для других ссылок (без класса), чтобы это работало, что я вставил в мой фрагмент ниже.И у вас была небольшая ошибка в вашем атрибуте класса в HTML: он class="navbar" - без точки.

div:not(.navbar) a {
  font-size: 100%;
  color: black;
  text-decoration: none !important;
  border-bottom: 6px solid red;
}

div:not(.navbar) a:hover {
  border-bottom: none;
  background-color: #80b3ff;
  color: white;
  text-decoration: none !important;
}
<body>
  <div class="navbar">
    <a href="#">Link 1</a>
  </div>
  <div>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...