在除具有SPECIFIC ID之外的所有元素上应用CSS样式

Raj*_*aul 48 html css

CSS代码(我需要的)

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

HTML代码

<body>
    <div>abc</div>
    <div>def</div>
    <div id='div1'>ghi</div>
</body>
Run Code Online (Sandbox Code Playgroud)

CSS没有像我预期的那样工作.

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

我怎样才能做到这一点?

Vuc*_*cko 69

使用:not selector:

div:not(#bar){
    color:red;
}
Run Code Online (Sandbox Code Playgroud)
<div>foo</div>
<div id="bar">bar</div>
Run Code Online (Sandbox Code Playgroud)


更新:name而不是ID:

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


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

div{
    color:red;
}

div[name="bar"]{
    color:blue;
}
Run Code Online (Sandbox Code Playgroud)
<div>foo</div>
<div name="bar">bar</div>
Run Code Online (Sandbox Code Playgroud)

另外,请参阅selectivizr


Tom*_*ard 18

CSS3解决方案:

div:not(#div1)
Run Code Online (Sandbox Code Playgroud)

CSS2解决方案:

div {
    color: red;
}

div#div1 {
    color: inherit;
}
Run Code Online (Sandbox Code Playgroud)

按名字:

CSS3解决方案:

div:not([name=div1]) {
    color: red;
}
Run Code Online (Sandbox Code Playgroud)

CSS2解决方案(注意IE6不支持 - 但谁更关心):

div {
    color: red;
}

div[name=div1] {
    color: inherit;
}
Run Code Online (Sandbox Code Playgroud)