60

CSS 代码(我需要的)

<style>
    div[id!='div1']// I actually needed an inequality operator for NOT EQUAL TO
    {
        font-size:40px;
    }
</style>

HTML 代码

<body>
    <div>abc</div>
    <div>def</div>
    <div id='div1'>ghi</div>
</body>

CSS 没有按我的预期工作。

我实际上想为所有 - 元素定义样式,<div>除了带有id='div1'.

我怎样才能做到这一点?

4

3 回答 3

97

使用:not选择器:

div:not(#bar){
    color:red;
}
<div>foo</div>
<div id="bar">bar</div>


更新:name而不是ID

div:not([name="bar"]){
    color:red;
}
<div>foo</div>
<div name="bar">bar</div>


更新:CSS2 选择器,与Tom Heard-s类似的答案:

div{
    color:red;
}

div[name="bar"]{
    color:blue;
}
<div>foo</div>
<div name="bar">bar</div>

另请参阅选择性

于 2013-10-19T09:52:14.207 回答
19

CSS3 解决方案:

div:not(#div1)

CSS2解决方案:

div {
    color: red;
}

div#div1 {
    color: inherit;
}

按名字:

CSS3 解决方案:

div:not([name=div1]) {
    color: red;
}

CSS2 解决方案(注意 IE6 不支持 - 但谁在乎):

div {
    color: red;
}

div[name=div1] {
    color: inherit;
}
于 2013-10-19T09:52:23.160 回答
2

如果您只针对支持 CSS3 选择器的浏览器,您可以这样做:

div:not(#div1) {
...my styles...
}
于 2013-10-19T09:52:57.837 回答