Med*_*Man 57 css css-selectors
我有一些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选择器会让我包含Target但不包含div 的div NotMyTarget？
解决方案必须适用于IE7,IE8,Safari,Chrome和Firefox
编辑:到目前为止尼克是最接近的.它很笨拙,我不喜欢这个解决方案,但至少它有效:
.A
{
/* style that all divs will take */
}
div.B
{
/* style that will override style .A */
}
Ron*_*era 49
您可以使用属性选择器来匹配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:四年后,:not现在已广泛使用,虽然在这个特定情况下冗长:
.A:not(.B):not(.C):not(.D):not(.E) {
border: 1px solid red;
}
不幸的是,这在问题中指定的IE 7-8中不起作用:http://caniuse.com/#search=:not
Nic*_*ver 15
我认为你可以做(直到CSS 3)覆盖的样式在这种情况下,你不从阶级想要什么是最好A B的A,就像这样:
.A.B { /* Styles */ }
.A { /* Reverse any styling you don't want */ }
| 归档时间： |
|
| 查看次数： |
30391 次 |
| 最近记录： |