将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 Wilkinson教授我关于:not伪选择器的知识。

Answer 1

这样就可以了..

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

但这只适用于如上所述的类名中的特定方法。

[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 2

如果您有一些divs的容器，那么您可以使用:not选择器（正如Harry在评论中提到的）：

.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 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选择器非常强大，在这种情况下显然针对的是非特定类的元素。