CSS *: not (div p) ничего не выбирает

У меня есть следующий код HTML:

<div>
    <p> linux version</p>
    <h1> new tool </h1>

И некоторый CSS для него, который должен выбрать <h1>, но ничего не выбрать.

*:not(div p) {
    font-family: sans-serif;
}

Не работает также следующее:

*:not(div>p) {}

У меня так много таких <div> <p> в HTML, а следующее выбирает и применяет шрифт:

div p {
    font-family: sans-serif;
}

Ответ 1

Как отмечали другие комментаторы: использование неселектора выглядит так:

E:not(s) - an E element that does not match simple selector s

где

A simple selector is either a type selector, universal selector, 
attribute selector, class selector, ID selector, or pseudo-class.

Итак, если вы хотите, чтобы код работал, вам нужно добавить класс к элементам <p>, которые вы не хотите использовать в стиле этого семейства шрифтов.

*:not(.classname) {
    font-family: sans-serif;
}

Альтернативно: если вам необходимо применить шрифт ко всем вашим элементам - обычно это делается путем установки его в элементе body, а остальные элементы в документе наследуют это правило.

Затем вы можете стирать элементы <p> в div по-разному.

body
{
   font-family: sans-serif;
}

div p
{
  /* the special font-family that you need for paragraphs within a div */
}

Ответ 2

<div>
    <p> linux version</p>
    <h1> new tool </h1>`
</div>

Теперь рассмотрим следующий код CSS -

*:not(div p) {
    font-family: sans-serif;
}

Этот код выбирает все элементы, кроме <p> внутри <div>. Поэтому a <div> также выбирается селектором *:not(div p), и, следовательно, все содержимое <div> получает стиль: font-family: sans-serif. Таким образом, текст в элементе <p> в <div> также получает стиль.

N.B. Вы должны следить за тем, чтобы две объявления CSS не противоречили друг другу. Тогда, если возникает такое противоречие, объявление, которое применяет некоторые стилистические победы над объявлением, которое запрещает применять этот стиль к этому элементу.

Следовательно, следующий код будет работать нормально

div>:not(p)
{
    font-family: sans-serif;
}

Этот селектор выберет элементы внутри элементов <div> except <p>. Поэтому вы можете использовать это вместо этого.

Ответ 3

Ну, это будет не совсем то же самое, но в этом случае вы можете использовать

div>*:not(p)

вместо

*:not(div>p)

Демо

Ответ 4

Кажется, в вашем вопросе, что с учетом разметки:

<div>
  <p>linux version</p>
  <h1> new tool </h1>
</div>

<h1 > элементы являются специальными. Так что будьте конкретны. Вместо определения стилей для "all-but-me" (как вы это делаете с "*: not (div p)" ) и стандартом для "all-of-them", а затем вы перезаписываете тот, который вы считаете особенным. Также как здесь:

div {
  font-family: serif;
}

div > h1 {
  font-family: sans-serif;
}