CSS中的选择器不起作用？

Question

以下是我尝试过的代码

的HTML

<div>
     <span>Span1</span>
     <span>Span12</span>
     <span>Span13</span>
</div> 

<div>
     <span>Span1</span>
     <span>Span12</span>
     <span>Span13</span>
</div> 

<span>Span2</span> 
<span>Span3</span> 

的CSS

 :not(div>span)
   {
      color : #ff0000;
   }

我希望使用非选择器将span2和span3设为红色

检查Js小提琴

http://jsfiddle.net/82KwV/

Answer 1

:not接受一个简单的选择器作为参数。 div > span不是简单的选择器，因此不能在该上下文中使用。 结果，您不能在CSS中说“我希望所有不具有div父级的范围都不是红色的”，而您必须妥协。

一种可能性是针对一般情况的特定子集。 例如，细微不同的“所有没有div父级的跨度”对应于：

:not(div) > span { color: red }

在更复杂的情况下，此方法可能不可行（例如，您不能使用div, p代替上面的div ），在这种情况下，您将不得不转向其他选项，例如“ do / undo”技巧：

span { color: red }
div > span { color: inherit }

可以很容易地将此​​排列扩展为p > span, div > span ，但是当然需要权衡：这些规则可能会覆盖样式表中的其他内容。

Answer 2

:not不允许这种类型的选择器。 更好地使用

body > span { color: red }

这比使用多个规则将其修补在一起更干净。