CSS *:not(div p) does not select anything

问题:

I have the following a HTML code:

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

And some CSS for it that should select <h1> but does not select anything.

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

The following does not work too:

*:not(div>p) {}

I have so many such <div> <p> in the HTML whereas the following selects and apply the font:

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

回答1:

As others have stated in the comments: the usage of the not selector is like this:

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

where

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

So if you want you code to work you'll have to add a class to the <p> elements which you don't want styled with that font-family.

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

---

Alternatively: If you need to apply a font to all your elements - it is generally done by setting it in the body element, then the other elements in the document inherit that rule.

Then you can style your <p> elements within the div differently.

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>

Now consider the following CSS code-

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

This code selects all elements except the <p> inside <div>. So a <div> is also selected by the selector *:not(div p) and hence all the contents of the <div> gets the style: font-family: sans-serif. So the text in the <p> element in the <div> also gets the style.

N.B. You should keep track so that two CSS declaration don't contradict each other. Then if such contradiction arises the declaration that applies some style wins over the declaration that forbids that style to be applied on that element.

Hence the following code will run fine

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

This selector will select the elements inside a <div> except <p>-elements. So you may use this instead.

回答3:

Well, it won't be exactly the same thing, but in this case you can use

div>*:not(p)

instead of

*:not(div>p)

Demo

回答4:

It seems in your question, that given the markup:

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

<h1> elements are the special ones. So be specific. Rather than define styles for "all-but-me" (as you do with "*:not(div p)" clause) set and standard for "all-of-them" and then you overwrite the one you consider special. Just like here:

div {
  font-family: serif;
}

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