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

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

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

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

Answer 1

如果您不想直接子选择器，只需为嵌套元素添加父引用。这将使你的事情发挥作用。

您可以添加以下内容。

.red .blue h1 {
    color: blue;
}

<强> WORKING DEMO

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

for Instance，

div.blue h1 {
    color: blue;
}

<强> WORKING DEMO - 2

在这两种情况下都可以。

Answer 2

浏览器从上到下读取您的CSS，它将以相同的方式应用..

首先你有一个名为

的规则

.blue h1 {
    color: blue;
}

因此，浏览器会解析此信息，并将h1标记为blue，但它会继续显示，它会点击第二个选择器

.red h1 {
    color: red;
}

现在，嵌套在h1内的.blue进一步嵌套在.red内，并且两个选择器的特异性相同，浏览器将继续并应用{{ 1}}到内部red。

那么解决方案是什么？

如果可以，只需更换班级的顺序......不是吗？你不能？而不是使用特定的选择器..

h1

Demo

与div.blue h1 { color: blue; }相比，上面的选择器更具体，因为它有.red h1和2个元素......所以在这里，浏览器会选择第一个规则，因为它更具体，因此会覆盖你的class选择器。

您可以根据需要选择特定的选择器，您可以将上面的内容写为.red h1或div.red div.blue h1，但请记住，您使用的选择器越多，性能栏就越多同样，你最终会编写越来越多的特定选择器以覆盖其他选择器，所以明智地选择..

Answer 3

或者也许是这样：

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

fiddle

这是100％。

Answer 4

希望它会帮助你

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

选择直接孩子，你不会再遇到任何问题。

Answer 5

.blue > * {
color: blue;
}

.red > * {
    color: red;
}

您可以随时尝试＆＃34;＆gt;＆＃34;选择器结合通配符

myfiddle

Answer 6

怎么样？

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

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

或抛出div元素

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

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

http://jsfiddle.net/N7FcB/6/

Answer 7

实际上你在div中需要多少H1？我说不多。所以为什么不把这个班级送给H1。

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

<强>更新

如果要有一个深度级别的框，请参阅小提琴http://jsfiddle.net/AnL7R/

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

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

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

希望有所帮助

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

7 个答案: