CSS селектор на основе предков, не имеющих класса - PullRequest
Новая
       1

CSS селектор на основе предков, не имеющих класса

0 голосов
/ 23 января 2019

Я хотел бы стилизовать класс на основе другого класса, не существовавшего в предках. 

div:not(.evil-class) .element {
  background-color: green;
}
<div class="evil-class">
  <div class="element">An element within the evil class</div>
</div>

<div class="element">An element NOT in the evil class</div>

Не уверен, почему это не работает?

Я знаю, что могу сделать обратное;применить стиль к обоим элементам, а затем перезаписать этот стиль, но я бы предпочел этого не делать, поскольку я перезаписывал бы стили, которые могли бы измениться в сторонней библиотеке.

Спасибо.

css-applied-despite-rule

1 Ответ

0 голосов
/ 23 января 2019

div:not(.evil-class) .element означает "Нечто с элементом класса , которое происходит от div , у которого нет класса evil-class"

Ваш элемент не происходит от любого div, поэтому div:not(.evil-class) не соответствует ни одному из предков (которые в данном случае являются только <body> и <html>).

В настоящее время нет способа выразить «Ни один из предков не имеет определенного класса» в CSS.

Селекторный уровень 4 предлагает разрешить :not() содержать сложные селекторы, чтобы в будущем вы могли сделать что-то вроде: 

.element:not(div.evil-class *) {
  background-color: green;
}
<div class="evil-class">
  <div class="element">An element within the evil class</div>
</div>

<div class="element">An element NOT in the evil class</div>

Поддержка браузера в настоящее время почти отсутствует , но приведенная выше демонстрация работает в текущих версиях Safari.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...