CSS: not () работает не так, как я ожидал

У меня есть следующий код HTML и CSS, который также можно найти и поиграть здесь //jsfiddle.net/0k1qah6x/7/

Мое намерение состоит в том, чтобы число «1», у которого есть класс «активный», не было красным.

.pdf-pagination a:not(.active) {
  color: red;
  text-decoration: none;
}

<div class = "pdf-pagination">
  <ul>
    <li class = "disabled">
      <a id = "pdfPaginationLink0" href = "#" data-page = "0">←</a>
    </li>
    <li class = "active">
      <a id = "pdfPaginationLink1" href = "#" data-page = "1">1</a>
    </li>
    <li>
      <a id = "pdfPaginationLink2" href = "#" data-page = "2">2</a>
    </li>
    <li>
      <a id = "pdfPaginationLink3" href = "#" data-page = "2">→</a>
    </li>
  </ul>
</div>

Элемент a не имеет активного класса, вместо этого вам необходимо настроить таргетинг на li.

— 26.03.2018 18:10

.active находится на li, поэтому вам нужен .pdf-pagination li:not(.active) a.

— 26.03.2018 18:10

css css-selectors

26.03.2018 18:07

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

У ваших якорей нет класса .active, в отличие от их родительского класса li.

Вам нужно будет изменить свой селектор и переместить :not() дедеl>selector в родительский, как показано ниже:

.pdf-pagination li:not(.active) a {
  color: red;
  text-decoration: none;
}

<div class = "pdf-pagination">
  <ul>
    <li class = "disabled">
      <a id = "pdfPaginationLink0" href = "#" data-page = "0">←</a>
    </li>
    <li class = "active">
      <a id = "pdfPaginationLink1" href = "#" data-page = "1">1</a>
    </li>
    <li>
      <a id = "pdfPaginationLink2" href = "#" data-page = "2">2</a>
    </li>
    <li>
      <a id = "pdfPaginationLink3" href = "#" data-page = "2">→</a>
    </li>
  </ul>
</div>

26.03.2018 18:10

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

: nth-child в сочетании с: not

Как раскрасить дочерние элементы зависшего элемента

Как стилизовать последний символ из входного текста в CSS?

Невозможно установить или установить флажок с помощью selenium python webdriver chrome

Недопустимое исключение селектора в Selenium с селекторами CSS

Различное содержимое для каждого псевдоэлемента ":: before"

Выбор каждых 3 последовательных элементов, начиная с 1, с помощью n-го селектора

Chrome DevTools: цикл через NodeList

Селектор CSS для первого вложенного элемента с классом

Поиск первого элемента диапазона с помощью Css-Selector (Selenium)

CSS: not () работает не так, как я ожидал

Ответы 1

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

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