我有一些div:
<div class="A">"Target"</div> <div class="A B">"NotMyTarget"</div> <div class="A C">"NotMyTarget"</div> <div class="A D">"NotMyTarget"</div> <div class="A E">"NotMyTarget"</div>
有没有一个CSS选择器,将得到我的div包含Target,但不是包含NotMyTarget的div?
解决方案必须在IE7,IE8,Safari,Chrome和Firefox上工作
编辑:到目前为止,尼克是最近的。它笨拙,我不喜欢的解决方案,但至少它的工作原理:
.A { /* style that all divs will take */ } div.B { /* style that will override style .A */ }
解决方法
您可以使用属性选择器来匹配只有一个类的div:
div[class=A] { background: 1px solid #0f0; }
如果要选择另一个具有多个类的div,请使用引号:
div[class="A C"] { background: 1px solid #00f; }
某些浏览器不支持属性选择器语法。像往常一样,“一些浏览器”是IE 6及以上的委婉语。
参见:http://www.quirksmode.org/css/selector_attribute.html
完整示例:
<!DOCTYPE html> <html> <head> <style> .A { font-size:22px; } .B { font-weight: bold; border: 1px solid blue; } .C { color: green; } div[class="A"] { border: 1px solid red; } div[class="A B"] { border: 3px solid green; } </style> </head> <body> <div class="A">"Target"</div> <div class="A B">"NotMyTarget"</div> <div class="A C">"NotMyTarget"</div> <div class="A D">"NotMyTarget"</div> <div class="A E">"NotMyTarget"</div> </body> </html>
编辑2014-02-21:四年后::现在没有广泛提供,虽然在这个特定情况下详细:
.A:not(.B):not(.C):not(.D):not(.E) { border: 1px solid red; }
不幸的是,这不工作在IE 7-8中指定的问题:http://caniuse.com/#search=:not