如何写这个：不是“在其他元素”的CSS规则？

下面是HTML布局如何写这个：不是“在其他元素”的CSS规则？

<div class="wrap"> 
    <div class="section"> 
     <span class="text">text1</span> 
    </div> 
    <span class="text">text2</span> 
<span class="not-text">don't color me!</span> 
</div>

我试着给一个样式到所有“文本”跨越这是不是在“节”的div。我想这一点，但它似乎并不奏效

.wrap :not(.section) .text

fiddle

任何帮助，不胜感激！

编辑：这种情况下有几种解决方法，包括使用>运算符，如“.wrap> .text”，但我想知道如何使：not选择器工作，以利用它在未来

来源

2013-02-14 skyisred

'.wrap> .text'会的工作，但是这欺骗.. – 2013-02-14 23:04:44

当您使用.wrap :not(.section) .text，这是你告诉一下浏览器：

寻找一个元素与类的.text
其生活的元素中不具有一类.section
其生活里面你的元素如果您在您的标记仔细一看，有一个班的.wrap

一个元素，没有符合该选择标准。

在您提供的标记中，我不认为您可以使用:not()专门选择那些不是.section的后代的.text元素。

，你可以得到的最接近的是通过使用直接后代选择，就像这样：

.wrap > .text

你也可以选择和风格的.wrap所有.text后代（无论是直接或没有），然后取消这些样式对于.section内的任何.text元素，像这样：

.wrap .text { 
    // your styles here 
} 

.wrap .section .text { 
    // your cancelled styles here 
}

来源

2013-02-14 23:42:33 zakangelle

非常好的解释！ – cimmanon 2013-02-15 00:00:51

@cimmanon谢谢！我在这个过程中学到了一点自己。 – zakangelle 2013-02-15 00:19:25

这就是我在自己的答案中分解复杂选择器的方法。几乎相同的情况的不同解释可以发现[这里]（http://stackoverflow.com/questions/7084112/css-negation-pseudo-class-not-for-parent-ancestor-elements/7084147#7084147）。简而言之，在后代选择器中使用'：not（）'是不可靠的。 – BoltClock 2013-02-15 07:41:38

你或许可以使用：

.wrap > span 
.wrap > *:not(div) 
.wrap > *:not(.section)

来源

2013-02-14 23:09:58

.wrap> *：没有（.section伪）是你真正需要的 http://jsfiddle.net/4zns2/ 33/ – 2013-02-14 23:30:31

我的意思是他们是独立的东西，不是一次全部。他们都会用提供的HTML代码做同样的事情。 – 2013-02-14 23:31:48

最佳选项给出CSS的约束写一个规则的所有文字，然后覆盖他们回到上一页为.section内的人创造价值。所以

.wrap .text { 
    // the styles you want 
} 

.wrap .section .text { 
    // styles undoing the styles above... depending on what the styles are it may not always be possible 

}

来源

2013-02-15 00:01:16 wheresrhys

如何写这个：不是“在其他元素”的CSS规则？

回答

相关问题