css – 如何选择一个类“A”,但不是类“B”的div?

前端之家收集整理的这篇文章主要介绍了css – 如何选择一个类“A”,但不是类“B”的div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一些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

猜你在找的CSS相关文章