css:不是选择器来定位除了条件之外的所有东西

时间:2014-10-14 23:27:40

标签: html css css3

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>

是否可以使用css :not选择器(在这种情况下)将所有<p>颜色变为红色,除了<p>而不是<div>

我在jsfiddle上运行了一些不同的变体,但无法让它工作?!

3 个答案:

答案 0 :(得分:4)

以下内容将更改不是<p>的直接后代的所有<div>元素的颜色:

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

<强> Demo fiddle

答案 1 :(得分:1)

你可以单独定位它们

p{
  color: red
}

div p{color:black}

<强> fiddle

它有效,因为div pp

更具体

答案 2 :(得分:1)

根据CSS-Tricks,:not()选择器只能采用&#34;简单选择器&#34;,定义为:

  

类型选择器,通用选择器,属性选择器,类选择器,ID选择器或伪类选择器

但:

  

可能不包含附加选择器或任何伪元素选择器。

但是,正如其他答案所示,有一些方法可以解决此问题并至少在此示例案例和其他简单案例中完成此行为。