html - CSS 作用域和多个类

Question

我遇到了父作用域与其子作用域发生争执的问题。

我试图完成的是在顶级 div(或我的情况下为 body 标记)中为我的页面设置默认配色方案。并且能够在 DOM 的深处更改颜色。

但是，当我使用以下内容时，内部 DIV 是紫色的，不是红色(演示请参见 fiddle)。

现在，如果我在文件中交换类，它就可以工作(它们在文件中的顺序)，但这不是我的解决方案，因为它也可能用于带有紫色面板的“红色页面”和也会出现同样的问题。

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

它们具有相同的特异性，但是 purple 在 CSS 中位于 red 之后，因此覆盖了它。

您只需切换它们即可解决问题。

http://jsfiddle.net/16t7g9cm/7/

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

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

---

但是，如果您不能对类重新排序，您可以使红色 选择器具体化:

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