Question

我不知道CSS是否可行，但我希望一般角色不适用于我的id=special中的特定元素。在我的例子中，所有DIV应该是红色的，但我只想id=special没有应用这种颜色。我知道我总是可以使用id=special覆盖该元素，但我很想知道是否有可能将某种排除在一般角色之外。

CSS 2和CSS 3中有什么想法吗？

示例：

<div>this is red</div>
<div>this is red</div>
<div id="special">this one must be blus</div>
div>this is red</div>

// My General Role
div
{
  background-color:Red;
}

Answer 1

CSS2解决方案

div {
    color: red;
}

div#special {
    color: inherit;
}

演示：http://jsfiddle.net/zRxWW/1/

Answer 2

CSS3解决方案：

div:not(#special)

Answer 3

CSS3允许:not()选择器：

div:not([id])
-or-
div:not(#special)
depending on what you want to exclude

You can read all about the selectors in the w3c docs

至于CSS2，there's a limited set of selectors，他们没有说明否定。

Answer 4

您可能希望使用div:not(#special)，但如果它仍然是蓝色，那么您也可以覆盖规则。 :not()选择器是CSS3属性，因此并非所有浏览器都支持。

Answer 5

这是CSS特异性如何工作的一个很好的例子。适用于特定类型的所有元素的一般规则（您的div规则将背景变为红色）将被应用于ID的更具体规则所取代。这个概念自CSS1以来就已经存在，并且可以在所有浏览器中使用。因此：

div {
  background-color:red;
}
#special {
 background-color: blue;  
}

...会让所有div变红。通过将special id应用于div，相反，一个div将为蓝色。

查看实际操作：http://jsfiddle.net/9Hyas/

查看这些文章，了解有关CSS特异性的更多信息：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/和http://www.htmldog.com/guides/cssadvanced/specificity/

如何在特定TAG上应用CSS

5 个答案: