Question

我遇到了一个问题，即父范围与其子女有争执。

我想要完成的是通过在顶级div（或我的情况下为body标签）中设置页面的默认颜色方案。并且能够更深入地改变DOM的颜色。

但是，当我使用以下内容时，内部DIV为紫色，不为红色（请参阅fiddle进行演示）。

现在，如果我在文件中交换类它（它们驻留在文件中的顺序），但是在我的情况下这不是一个解决方案，因为它也可能是带有紫色面板的“红页”会出现同样的问题。

小提琴： http://jsfiddle.net/16t7g9cm/4/

HTML：

<div class="purple">
    <div class="red panel"> .red.panel </div>
    <div class="red">
       <div class="panel"> .red .panel </div>
    </div>
    <div class="panel"> .panel </div>
</div>

CSS：

.red .panel,
.panel.red {
    background-color: #cc3300;
    color: #ffffff;
}

.purple .panel,
.panel.purple {
    background-color: #990099;
    color: #ffffff;
}

任何人都可以解释/指出导致此行为的原因和任何可能的解决方案。

问候。

Answer 1

这是一个特殊性问题，你越接近DOM，你就越具体，所以如果你只是替换你的css语句的位置：

.purple .panel,
.panel.purple {
    background-color: #990099;
    color: #ffffff;
}

.red .panel,
.panel.red {
    background-color: #cc3300;
    color: #ffffff;
}

它会工作:) http://jsfiddle.net/16t7g9cm/6/

如果订购有点困难的另一种方法是使其更具体（它的hacky但有效）：

.red.red .panel,
.panel.red.red {
    background-color: #cc3300;
    color: #ffffff;
}

.purple .panel,
.panel.purple {
    background-color: #990099;
    color: #ffffff;
}

如你所见，而不是.red我有.red.red这是同样的事情，但给你更多的特异性 http://jsfiddle.net/16t7g9cm/8/

CSS范围和多个类

1 个答案: