html - CSS:子元素的嵌套声明被其父嵌套声明覆盖

Question

我对嵌套元素的嵌套 CSS 声明有疑问。嗯..这个问题真的很难描述，如果你不明白我的意思，请转到我在下面提供的 jsfiddle 链接，你就会明白问题是什么。

这是标记

<div class="red">
    <h1>should be red</h1>
    <div class="blue">
        <h1>should be blue</h1>
    </div>
</div>

这是 CSS:

.blue h1 {
    color: blue;
}
.red h1 {
    color: red;
}

注意我把.blue h1在 .red h1 之前声明。但是我有 .blue元素作为 .red 的子元素元素。请查看 jsfiddle 上的输出。它在 .blue h1 上显示错误的颜色元素。但是，如果我将声明换成 .red h1先然后.blue h1 ，一切都很好。但在我的真实情况下我不能这样做，而且如果我交换声明，如果标记也被交换，它就不会工作。反之亦然。

http://jsfiddle.net/N7FcB/

有人知道如何解决这个问题吗？

PS:我知道直接子选择器会解决问题。但我避免使用它，因为我定位的元素 ( <h1> ) 并不总是具有该类的元素的直接子元素。

先谢谢了:)

更新:想象一下我有这种声明

.red h1 { color: red }
.green h1 { color: green }
.blue h1 { color: blue }
.gray h1 { color: gray }
/* and so on */

我可以自由地创建我的标记，无论它是红色中的蓝色还是相反的颜色，或者红色中的灰色是蓝色中的红色。它应该在我编写嵌套标记的任何条件下都能正常工作。

更新:我认为每个人都没有真正得到我在这里寻求的东西，请查看这个新的 fiddle ，它可以更好地理解我想要的东西。第一种情况是假的，第二种情况是正确的。

http://jsfiddle.net/kmMXW/9/

Answer 1

如果您不想要直接的子选择器，只需为嵌套元素添加一个父引用。这将使您的工作正常进行。

您可以添加以下内容。

.red .blue h1 {
    color: blue;
}

WORKING DEMO

要强制您的 div 呈现蓝色，您只需将您正在使用的元素的引用添加到类中。

例如，

div.blue h1 {
    color: blue;
}

WORKING DEMO - 2

在这两种情况下，它都会起作用。