使用 CSS :not with concatenated 类 (.row.heading)

Question

我正在尝试设置所有 div 元素的样式，但两个不同 class 组中的元素除外。我尝试过的所有方法似乎都不起作用。

下面的测试代码应该使带有 "test" 文本内容的 div 变成橙色，但是选择器的 none 起作用。

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;
}

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

Answer 1

你可以使用这样的东西

很遗憾，您不能在单个非选择器中添加多个 class。

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

:not() 的问题是它一次只允许一个简单的选择器。这意味着 :not(div)、:not(.ZoomBar)、:not(.row) and/or :not(.heading) 中的任何一个。它也不接受

一个复合选择器，.row.heading，由两个class选择器组成；或
以逗号分隔的多个选择器列表，.ZoomBar, .row.heading。

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

由于您要在单个规则中寻找两种类型的排除，因此您的问题变得更加复杂（呵呵）。但这仍然可行；这只是意味着您需要编写一个稍微复杂的规则，用两个选择器来解释 .row.heading:

中的两个 class 选择器

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>

如果这些是 class 名称的唯一可能组合，您可以使用 div:not([class]) 简单地排除具有 class 属性的 div 元素，但根据你的问题，我怀疑情况并非如此。

例如，请注意上面的代码片段中 div[class="heading"] 元素与 div:not(.ZoomBar):not(.row) 匹配，因此颜色为橙色。如果您的元素可能具有 class 名称中的任何一个，但不能同时具有这两个名称，那么这些元素将被考虑在内。

使用 CSS :not with concatenated 类 (.row.heading)

Using CSS :not with concatenated classes (.row.heading)

html

css

css-selectors