CSS псевдо-класс:not() для родительских элементов / элементов-предков

Это сводит меня с ума:

HTML:

<div><h1>Hello World!</h1></div>

CSS:

*:not(div) h1 { color: #900; }

Разве это не гласит: "Выбрать все h1 элементы, которые имеют предка, который не является div element...?"Таким образом, "Hello World!"не должен быть окрашен в красный цвет, но все же он есть.

Для вышеупомянутой разметки добавление дочернего комбинатора работает:

*:not(div) > h1 { color: #900; }

Но не влияет на h1 элемент, если он не является потомком div элемент. Например:

<div><article><h1>Hello World!</h1></article></div>

Вот почему я хотел бы указать h1 элемент как потомок, а не ребенок, из div элемент. Кто-нибудь?

Источник

2 ответа

Решение

Разве это не гласит: "Выбрать все h1 элементы, которые имеют предка, который не является div элемент...?"

Оно делает. Но в типичном HTML-документе каждый h1 имеет по крайней мере двух предков, которые не являются div элементы - и эти предки не кто иной, как body а также html,

Это проблема с попыткой фильтрации предков с помощью :not(): он просто не работает надежно, особенно когда :not() не квалифицируется каким-либо другим селектором, таким как селектор типа или селектор класса, например .foo:not(div), Вам будет намного проще просто применять стили ко всем h1 элементы и перекрывая их div h1,

В селекторах 4:not() улучшен прием полных комплексных селекторов, содержащих комбинаторы, в том числе комбинатор-потомок. Будет ли это реализовано в быстром профиле (и, следовательно, CSS), еще предстоит проверить и подтвердить, но как только оно будет реализовано, вы сможете использовать его для исключения элементов с определенными предками. Из-за того, как работают селекторы, для надежной работы нужно сделать отрицание на самом элементе, а не на его предке, и поэтому синтаксис будет выглядеть немного иначе:

h1:not(div h1) { color: #900; }

Любой, кто знаком с jQuery, быстро заметит, что этот селектор работает в jQuery сегодня. Это одно из многих несоответствий между Селектором 3:not() и JQuery's:not(), который Селекторы 4 стремится исправить.

Источник

<html> элемент не является <div>, <body> элемент не является <div>,

Таким образом, условие "имеет предка, который не является <div>"будет верно для всех элементов.

Если вы не можете использовать > (ребенок) селектор, я не думаю, что вы можете делать то, что вы пытаетесь сделать - это не имеет смысла. Во втором примере <article> это не div, так что соответствует *:not(div) тоже.

Источник
Другие вопросы по тегам