Почему: not (p), по-видимому, выбирает теги ?

Мой HTML это:

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="stylesheet.css">
<head>
</head>
<body>
<p>hiya</p>
<h1>this is h1</h1>
<h2>this is h2</h2>
</body>
</html>

My stylsheet.css:

:not(p)
{
color:#ff0000;
}

Тем не менее все красное, включая . Я пробовал Firefox 20, Internet Explorer 10 и Chrome. Похоже, что он не является более базовым, чем это, но я не могу понять, почему это не работает (предотвращение  от красных, то есть). Любая помощь по этому поводу была бы высоко оценена.

Ответ 1

:not(p) соответствует body.

Значение по умолчанию color равно inherit.

p не имеет набора стилей.

p поэтому наследует свой цвет от body, который является красным.

Решения: экспликация определяет, что вы хотите быть красным, или явно задаете другой цвет для p (т.е. не используйте :not), ИЛИ используйте :not(body):not(p)

Ответ 2

Это выглядит потому, что вы не определили определенный стиль для p-тега. Итак: not (p) применяется даже к элементу body и унаследован.

Ответ 3

Вы можете создать отдельный идентификатор для , и вы можете использовать not в css.

HTML

<p class="hiya" id="hiya">hiya</p>
<p class="hi" id="hi">hi</p>
<h1>this is h1</h1>
<h2>this is h2</h2>

CSS

p:not(#hiya) { color:#ff0000; }

Это приведет к выходу красного цвета для , кроме  с идентификатором "hiya".