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

我有以下标记：

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

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

更新

正如AndrewBone所指出的，这条规则似乎只适用于一个极小的例子。我现在明白了问题所在，但不知道如何解决：

另一个CSS文件中的

h1

应用了一条规则（无法删除），该规则的优先级高于我编写的规则。我怎样才能解决这个问题

这是

解决方案

Vucko指出，

h1

类型选择器具有更高的优先级，因此不会应用该规则。因此，为了避免列出所有可能的组合，应该使用

*

选择器

最终结果：

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

---

我要感谢Paulie_D和David Wilkinson教授我有关

：not

伪选择器的知识。

如果你有一些容器用于那些

div

，那么你可以使用

：not

选择器（正如Harry在评论中提到的）：

.main:不是（.class-1）。class-5{
颜色：红色；
}

1.
2.
3.
4.
5.

这样就可以了

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

…但这只适用于上述类名中的特定methodolody

[class^=“class-”]：不是（.class-1）。class-5{
颜色：红色；
}

内容
内容
内容
内容
内容

这就做到了：

CSS:

HTML:

内容
内容
内容
内容

---

：not

选择器功能非常强大，在这种情况下，它显然针对的是非特定类的元素。

这不是期望的结果吗？您也可以使用

：not

选择器，但它是一个复杂的选择器。带有

.class xxx的
div
是
body
的直接子级吗？或者它周围有包装纸吗？注意：您的选择器应该根据属性工作（例如，
颜色
应该没有问题，因为子项将从父项继承它），
：not
将帮助您使用较少的代码实现它。请尝试@AndrewBone yes，这样看起来我的规则格式良好。然而，我无法达到我想要的结果。我将用更多信息更新帖子。尚未选中，但如果有一个更高级别的0类包装器，那么它将应用于所有元素，因为0类是必需的格式，5类将是后代。您介意解释一下该部分是什么吗
[class^=“class”]
是吗？它是一个属性选择器，用于以“class-”开头的类，非常优雅的解决方案。但是性能呢？
：不
（或一般的伪选择器）有性能开销吗？我不确定：不具体，但这里有一个关于CSS开销和性能的好资源：谢谢链接！非常有用！：）
h1
的样式将覆盖其他样式。我想将此规则应用于
h1
，
h2
<代码>p

等。。这是使用

的好借口吗！重要信息

或者有没有比列出所有可能的组合更简洁的方法？哇。我不知道您可以在CSS中使用

*

作为通配符。打得很好的Vucko！使用

*

时要小心，这可能会导致很多问题：）而且。而且，它有很好的浏览器支持（GTIE9）。我相信它适合这个例子。非常感谢您的帮助！：）

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

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

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