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

我有以下标记：

<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.
我想应用规则颜色：#fff;对每个不属于1级孩子的5级孩子.这是我样式表的那部分：

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

这不起作用,我不确定为什么.我不相信这条规则也被覆盖了.

UPDATE

正如AndrewBone指出的那样,规则似乎只是一个最小的例子.我现在明白了什么是错的,但我不知道如何解决它：

在另一个CSS文件中有一个规则应用于h1(无法删除),并且该规则的优先级高于我编写的规则.我怎样才能解决这个问题？

这是an example JSFiddle.

解

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

最终结果：

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

感谢Paulie_D和David Wilkinson教我：不是伪选择器.

如果你有这些div的容器,你可以使用：not selector(正如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