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

Question 1

Це зводить мене з розуму:

HTML:

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

CSS:

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

Чи не читається це: "Виділити всі h1елементи, у яких є предок, який не є divелементом ...?" Таким чином, "Привіт Світ!" не повинен бути пофарбований у червоний колір, але він все ще є.

Для вищевказаної розмітки працює додавання дочірнього комбінатора:

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

Але не впливає на h1елемент, якщо він не є divнащадком елемента. Наприклад:

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

Ось чому я хотів би вказати h1елемент як нащадок елемента, а не нащадок div. Хто-небудь?

Question 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 сьогодні . Це одна з низки відмінностей між Selector 3 :not()та jQuery:not() , які Селектори 4 прагнуть виправити.

Question 3

<html>Елемент не є <div>. <body>Елемент не є<div> .

Отже, умова "має предка, який не є <div> " буде справедливою для всіх елементів.

Якщо ви не можете використовувати >(дочірній) селектор, я не думаю, що ви можете робити те, що намагаєтесь зробити - це насправді не має сенсу. У вашому другому прикладі <article>не є div, так що це також збігається *:not(div).