将CSS规则应用于子类中的多个元素。

Question

我有以下标记：

<div class="class-XXX">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>

为了简单起见，让我们假设class-XXX只能具有class-1、class-2、class-3和class-4的值。

我想将规则color: #fff;应用于class-5的每一个不是class-1的子级。在这里，我的样式表的那一部分：

.class-2 .class-5,
.class-3 .class-5,
.class-4 .class-5 {
  color: #fff;
}

这不管用，我也不知道为什么。我也不认为这个规则被推翻了。

更新

正如AndrewBone所指出的，这个规则似乎在一个最小的例子中起作用。我现在知道出了什么问题，但我不知道如何解决：

在另一个CSS文件中有一个规则应用于h1 (不能删除)，并且该规则比我编写的规则优先级更高。我怎么才能解决这个问题？

这是一个例子JSFiddle。

溶液

Vucko指出，h1类型选择器具有较高的优先级，因此不适用该规则。因此，为了避免列出所有可能的组合，应该使用*选择器！

最终结果：

.class-2 .class-5 *,
.class-3 .class-5 *,
.class-4 .class-5 *{
  color: #fff;
}

我感谢Paulie_D和David教我关于:not伪选择器的知识.

Answer 1

如果您有一些用于这些divs的容器，那么可以使用:not选择器(如注释中提到的)：

​

.main :not(.class-1) .class-5 {
  color: red;
}

<div class="main">
  <div class="class-1">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>1</h1>
    </div>
  </div>
  <div class="class-2">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>2</h1>
    </div>
  </div>
  <div class="class-3">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>3</h1>
    </div>
  </div>
  <div class="class-4">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>4</h1>
    </div>
  </div>
  <div class="class-5">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>5</h1>
    </div>
  </div>
</div>

​

.main :not(.class-1) .class-5 {
  color: red;
}

JSFiddle

Answer 2

这样就行了..。

  [class^="class-"]:not(.class-1) .class-5 {
          */ your styles here */
        }

...but --这仅适用于类名中的特定方法，如上面所述。

​

[class^="class-"]:not(.class-1) .class-5 {

  color: red;

}

<div class="class-1">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-2">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-3">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-4">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>
<div class="class-5">
  <div class="class-5">
    <!-- could be any text element -->
    <h1>Content</h1>
  </div>
</div>

​

Answer 3

这就是诀窍：https://jsfiddle.net/023rox1k/

CSS：

.wrapper :not(.class-1) .class-5 {
  color: blue;
}

HTML：

<div class="wrapper">
  <div class="class-1">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
  <div class="class-2">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
  <div class="class-3">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
  <div class="class-4">
    <div class="class-5">
      <!-- could be any text element -->
      <h1>Content</h1>
    </div>
  </div>
</div>

在这种情况下，:not选择器非常强大，显然是针对不属于某个类的元素。