代码之家 › 专栏 › 技术社区 › MedicineMan

如何选择具有“A”类但不具有“B”类的DIV?

css-selectors css

MedicineMan · 技术社区 · 14 年前

我有一些沙发:

<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 但不包括 NotMyTarget ?

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

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

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

3 回复 | 直到 10 年前

Ron DeVera 10 年前

可以使用属性选择器来匹配 div 只有一个类:

div[class=A] {
  background: 1px solid #0f0;
}

如果你想选择另一个 div 有多个类,请使用引号:

div[class="A C"] {
  background: 1px solid #00f;
}

某些浏览器不支持属性选择器语法。和往常一样,“某些浏览器”是IE6及更老版本的委婉说法。

另请参见: 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 78中不起作用,如问题中所述: http://caniuse.com/#search=:not

Ms2ger 14 年前

.A:not(.B) {}

但猜猜谁不支持…实际上,ie<=8。

Nick Craver 14 年前

我认为你能做的最好的(直到CSS 3)是用你不想从类中得到的东西覆盖样式。 A B 在里面 A ,如下所示:

.A.B { /* Styles */ }
.A { /* Reverse any styling you don't want */ }

推荐文章

Monica · 使用Selenium和Python在没有url的情况下单击下载文件

2 年前

Kevin Rodgers Jr. · Python BeautifulSoup:在in select语句中排除其他标记

2 年前

Arad · 即使使用相同的选择器,外部样式表也会覆盖内部样式表

6 年前

user1032531 · jQuery Validate require\u from\u group并按名称选择

6 年前

Christian Luneborg · 星级评定不起作用

6 年前

Gabriel Morais · CSS未应用媒体查询

6 年前

Kevin · CSS属性选择器中的“i”是什么意思?[副本]

6 年前

S syed · 如何在javascript中删除DIV标记内的CSS类?[副本]

6 年前

Karos papermoon · Div和定位问题

6 年前

user9549074 · 如何从CSS中的输入文本中设置最后一个字符的样式?

6 年前