1

以下是我尝试过的代码

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/

4

2 回答 2

7

: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，但当然需要权衡：这些规则可能会覆盖样式表中的其他内容。

于 2013-11-07T12:31:51.303 回答
0

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

body > span { color: red }

这比使用多个规则拼凑起来更干净。

于 2013-11-07T12:33:15.350 回答