css：不是选择器，除了条件以外，所有目标

Question

http://jsfiddle.net/m7qLdstp/1/

<style>
:not(div p), p{
  color: red
}
</style>

<p>This is a paragraph that should be red.</p>
<div><p>This is a paragraph that should not be red.</p></div>

Is it possible to use the css :not selector to (in this case) turn all <p> color red, except for any <p> instead a <div> ?

I ran a few different variations on jsfiddle but cannot get it to work?!

Answer 1

The following will change the color of all <p> elements that are not direct descendants of a <div> :

:not(div) > p{
    color: red;
}

Demo fiddle

Answer 2

You could just target them separately

p{
  color: red
}

div p{color:black}

fiddle

it works because div p is more specific than p

Answer 3

According to CSS-Tricks , :not() selector can take only a "simple selector", defined as:

a Type Selector, Universal Selector, Attribute Selector, Class Selector, ID Selector, or Pseudo Class Selector

but:

may not contain additonal selectors or any pseudo-element selectors.

However, as other answers suggest, there are ways you could work around this issue and accomplish the behavior at least in this example case and other simple cases.