Html CSS：子元素上的嵌套声明被其父嵌套声明覆盖

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

这是标记

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

请注意，我将

.blue h1

放在

.red h1

声明之前。但是我有

.blue

元素作为

.red

元素的子元素。请查看JSFIDLE上的输出。它在

.blue h1

元素上显示错误的颜色。但是，如果我先将声明换成

.red h1

，然后再换成

.blue h1

，就可以了。但是在我的实际案例中我不能这样做，而且如果我交换声明，如果标记也被交换，它将不起作用。反之亦然

有人知道怎么解决这个问题吗

PS：我知道使用直接子选择器可以解决这个问题。但我避免使用它，因为我所针对的元素（

）并不总是该类元素的直接子元素

之前谢谢：）

更新： 想象一下我有这样的声明

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

我可以自由地创建我的标记，无论它是红色里面的蓝色，还是相反的颜色，或者是红色里面的灰色，而红色里面是蓝色。在我编写嵌套标记的任何情况下，它都应该工作得很好

更新： 我想每个人都没有真正得到我在这里寻找的东西，请看看这把新小提琴，它对我想要的东西有更好的理解。第一种情况是错误的，第二种情况是正确的

---

如果不需要直接子选择器，只需为嵌套元素添加父引用即可。 这会让你的东西运转起来

您可以添加以下内容

.red .blue h1 {
    color: blue;
}

要强制div渲染蓝色，只需将所使用元素的引用添加到类中

例如，

div.blue h1 {
    color: blue;
}

---

在这两种情况下，它都可以工作。

浏览器从上到下读取CSS，并以相同的方式应用

所以首先你有一个规则叫做

.blue h1 {
    color: blue;
}

所以浏览器将解析这些信息，并将您的

h1

涂成

blue

，但它会继续，并点击第二个选择器，即

.red h1 {
    color: red;
}

现在，由于嵌套在

中的
h1
。蓝色的
进一步嵌套在
红色的
中，而且两个选择器的特性相同，浏览器将继续将
红色的
应用到内部的
h1

那么解决办法是什么呢

如果可以，只需交换类的顺序。。。不你不能？然后使用特定的选择器

div.blue h1 {
    color: blue;
}


与
.red h1
相比，上面的选择器更具体，因为它有一个
类和两个元素。。。所以在这里，浏览器将选择第一条规则，因为它更具体，从而覆盖您的
.red h1
选择器

您可以根据需要使选择器具体化，您可以将上面的内容写成
div.red div.blue h1
或
.red.blue h1
，但请记住，您使用的选择器越具体，您点击性能栏的次数越多，您也会编写越来越多的特定选择器，以覆盖其他选择器，所以，明智地选择..
或者像这样：

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


这是100%。
希望对您有所帮助

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

选择作为直接子对象，您将不再面临任何问题

.blue > * {
color: blue;
}

.red > * {
    color: red;
}

您可以尝试将“>”选择器与通配符结合使用

这个怎么样

div.red > h1 {
    color: red !important;
}

div.blue > h1 {
    color: blue !important;
}

或抛出div元素

.red > h1 {
    color: red !important;
}

.blue > h1 {
    color: blue !important;
}

实际上一个div中需要多少个H1？我说的不多。那么为什么不把这个类交给H1呢

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


更新

有一个深度水平的盒子怎么样，看小提琴

通过使用链接类，可以覆盖上面的类，例如：

.blue,
.blue.first,
.blue.second
/*more depth class*/
{
    color: blue;
}

.red,
.red.first,
.red.second
/*more depth class*/
{
    color: blue;
}

希望能有所帮助
哇，几秒钟前刚刚编辑了
特定选择器
部分。。冷静的解释+1@NathanLee我决定放弃一个答案，因为你错过了：）@NathanLee这个答案：PHi，我理解。但这意味着您特别声明了taht
。blue
应该更加具体。在我的例子中，我的CSS将像一个框架一样工作。人们可以自由地编写标记，无论是
blue
中的
red
还是
red
中的
blue
。看看这个例子，hemph，好吧，我想每个人都不清楚我在寻找什么。请试试这把小提琴，第二种方法和前面的答案相同。我想我们可以在前面回答的评论中讨论这个问题。第一种方法，它也可以工作，但我仍然需要声明它，不明确知道蓝色将在红色中。就像外星人的回答一样。。我不这么认为。。我避免使用直接子选择器。。假设我有这样的声明。红色h1{颜色：红色}。绿色h1{颜色：绿色}。蓝色h1{颜色：蓝色}。灰色h1{颜色：灰色}/*等等*/我可以自由创建我的标记，无论它是红色中的蓝色，还是红色中的相反颜色，或者红色中的灰色，蓝色中的灰色。您好，我认为@AlexandreDiacov答案也是如此。请看我关于这个问题的最新消息，我不希望它是具体的，好像你确切地知道蓝色将在红色元素中。这将是有帮助的检查它。当你嵌套元素时，在cssHi@venu中使用直接子选择器，是的，我理解，但这不是我要问的问题。不幸的是，这是CSS中众所周知的特异性缺陷之一。嗨@BoltClock，是的，我想我们在下一个CSS版本中需要“最近的子”选择器。我需要CSS根据最近在声明中起作用的容器，而不是最新的声明（当我们有几个声明被认为是相同的强声明时），来检测哪里的声明更强。感谢您的回答，不幸的是，就像我在我的问题上写的一样，h1并不总是di
.blue,
.blue.first,
.blue.second
/*more depth class*/
{
    color: blue;
}

.red,
.red.first,
.red.second
/*more depth class*/
{
    color: blue;
}