Question

我试图设置所有div元素的样式，但两个不同类组中的元素除外。我尝试过的所有东西似乎都无法发挥作用。

以下测试代码应使div与＆＃34;测试＆＃34;文本内容为橙色，但没有选择器工作。

＆＃13;

div {
  height: 40px;
  width: 100px;
  background: cyan;
  display: inline-block;
}
div:not(.ZoomBar):not(.row.heading) {
  background: orange;
}
div:not(.ZoomBar, .row.heading) {
  background: orange;
}
div:not(.ZoomBar),
div:not(.row.heading) {
  background: orange;
}

＆＃13;

<div class="ZoomBar">ZoomBar</div>
<div class="row heading">Heading</div>
<div>Test</div>

＆＃13;

Answer 1

你可以使用这样的东西

您不能在单个非选择器中添加多个类。

div {
  height: 40px;
  width: 100px;
  background: cyan;
  display: inline-block;
}

 

div:not(.ZoomBar):not([class="row heading"]){
  background: orange;
}

<div class="ZoomBar">ZoomBar</div>
<div class="row heading">Heading</div>
<div class="heading">Heading</div>
<div>Test</div>

Answer 2

答案是：

div {
  height: 40px;
  width: 100px;
  background: cyan;
  display: inline-block;
}
div:not([class*="ZoomBar"]):not([class*="row heading"]):not([class*="heading row"]) {
  background: orange;
}

https://jsfiddle.net/ars9fL56/5/

Answer 3

null的问题在于它一次只允许一个简单的选择器。这意味着:not()，:not(div)，:not(.ZoomBar)和/或:not(.row)中的任何一个。它不接受

复合选择器:not(.heading)，由两个类选择器组成;或
以逗号分隔的多个选择器列表.row.heading。

值得注意的是，您尝试过的选择器will work in jQuery, though not CSS。

你的问题因为你在单一规则中寻找两种类型的排除而变得复杂（heh）。但它仍然可行;它只是意味着你需要写一个稍微复杂的规则，有两个选择器来说明.ZoomBar, .row.heading中的两个类选择器：

.row.heading

div {
  height: 40px;
  width: 100px;
  background: cyan;
  display: inline-block;
}
div:not(.ZoomBar):not(.row),
div:not(.ZoomBar):not(.heading) {
  background: orange;
}

如果这些是类名的唯一可能组合，您可以使用<div class="ZoomBar">ZoomBar</div> <div class="row heading">Heading</div> <div class="heading row">Heading</div> <div class="heading foo row">Heading</div> <div class="heading">Heading</div> <div>Test</div>简单地使用类属性排除div元素，但根据您的问题，我怀疑这是事实并非如此。

例如，请注意上面的代码段中div:not([class])元素与div[class="heading"]匹配，因此显示为橙色。如果您可能包含具有类名但不包含两者的元素，则会考虑这些元素。

使用CSS：不使用连接类（.row.heading）

3 个答案: