使用CSS :not与级联类(.row.heading)

Question

除了两个不同的类组中的元素之外，我正在尝试对所有的div元素进行样式化。我试过的每一件事似乎都不管用。

下面的测试代码应该使带有" test“文本内容的div变成橙色，但是没有一个选择器工作。

​

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

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

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

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

您的问题是复杂的(呵呵)事实，您正在寻找两种类型的排除在一个单一的规则。但是它仍然是可行的；它只是意味着您需要编写一个稍微复杂一些的规则，在.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"]元素与div:not(.ZoomBar):not(.row)匹配，因此是橙色的。如果您可能有任何一个类名的元素，但不是两者都有，那么这些元素将被考虑在内。

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/