单独的 CSS 选择器 [重复]答案

【问题标题】：Separate CSS selectors [duplicate]单独的 CSS 选择器 [重复]
【发布时间】：2011-10-07 06:00:42
【问题描述】：

可能重复：
Negative CSS selectors

我想在我的页面上分离一些 CSS，我有一个div

<div class="separate">
    <a href="#">a link</a>
</div>

所以当我说

div{
    background:red;
}

除 .separate 之外的所有 div 都变为红色我需要一种没有 iframe 的方法来做到这一点

【问题讨论】：

标签： html css

【解决方案1】：

这可以使用 CSS3 的 not 选择器完成，并且适用于所有浏览器除了 internet explorer（惊喜）：

div:not(#seperate){
     background:red;
}

至于 IE，我不认为这是可以做到的（除非你给每个 div（除了单独的）另一个类来做到这一点。

例如

<div class="origClass notSeperate"></div>
<div class="seperate></div>
<div class="origClass2 notSeperate"></div>

但这很愚蠢:)

【讨论】：

【解决方案2】：

只需添加任何您想要分离的样式，然后再做

div{
       background:red;
   }

例如：

.separate{
    background:blue;
}

【讨论】：

相当混乱的解决方案，当涉及到只修改 div 时。为什么不用div.separate 而不是.separate？
div.separate 如果仅在 div 上设置了单独的类，则无用。 .separate 就足够了，因为 CSS 选择器是从右到左解析的。所以客户端搜索所有出现的.separate，然后再次搜索所有div，然后只返回具有指定类的那些。这将减少 CSS 解析时间。首先为所有 div 设置样式，然后为异常设置样式是 CSS3 之前的常见做法，但浏览器仍然不完全支持。这在@Guffa 的回答中有所描述。

【解决方案3】：

您可以这样做：

为div.separate div 指定不同的背景颜色（这样就不会被覆盖）-see proof in jsfiddle。
使用 div:not(.separate) 选择器，但仅支持 CSS3 (see more) - see proof in jsfiddle 的浏览器支持。
使用 JavaScript（例如 jQuery 框架）并使用 CSS3 选择器设置它（这样它就可以在所有主流浏览器中工作）-see proof in jsfiddle。

但我建议没有解决方案。 1，因为它是跨浏览器且不需要 JavaScript。

【讨论】：

【解决方案4】：

发件人：Negative CSS selectors

您可以在 javascript 的帮助下完成此操作（以 jquery 为例）：

$j('.not(.separate)>div').css({background:'red'});

或

你可以这样做：

div { background: red; }
.separate { background: white; }

或

你可以为你想要红色的 div 添加一个合适的样式类。

【讨论】：

【解决方案5】：

您可以为所有 div 设置背景，然后为特定类覆盖它而不使用背景：

div { background-color: red; }
div.separate { background-color: transparent; }

【讨论】：