Question

我有一些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但不包含包含NotMyTarget的div？

解决方案必须适用于IE7，IE8，Safari，Chrome和Firefox

编辑：到目前为止尼克是最接近的。它很笨拙，我不喜欢这个解决方案，但至少它有效：

.A
{
   /* style that all divs will take */
}
div.B 
{
  /* style that will override style .A */
}

Answer 1

您可以使用属性选择器来匹配只有一个类的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

Answer 2

.A:not(.B) {}

但是猜猜谁不支持......确实，IE＆lt; = 8。

Answer 3

我认为你能做到的最好（直到CSS 3）在A B中用A中的.A.B { /* Styles */ } .A { /* Reverse any styling you don't want */ }类覆盖了你不想要的内容，如下所示：

{{1}}

如何选择“A”类而不是“B”类的div？

3 个答案: