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

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

css-selectors css

MedicineMan · 技术社区 · 15 年前

我有一些沙发:

<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 回复 | 直到 11 年前

Ron DeVera 11 年前

可以使用属性选择器来匹配 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 15 年前

.A:not(.B) {}

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

Nick Craver 15 年前

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

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前