html - 嵌套元素的类被父类覆盖

Question

我遇到了一个真正令人沮丧的 CSS 选择性问题，我想了解原因。给定以下 CSS 和 HTML...

* { box-sizing: border-box; font-size: 14px; line-height: 1.5; padding:10px; margin:10px; }

.highlight { background-color:#B9D4FA; color:#000000; }
.contrast { background-color:#3E6FB5; color:#FFFFFF; }

.highlight a:link, .highlight a:visited { color:#3E6FB5; }
.highlight a:hover, .highlight a:active { color:#009900; }

.contrast a:link, .contrast a:visited { color:#FFFFFF; }
.contrast a:hover, .contrast a:active { color: #990000; }

<div class="contrast">
<a href="#">CONTRAST LINK</a>
<div class="highlight"><a href="#">HIGHLIGHT LINK</a></div>
</div>

(或尝试 jsfiddle)

为什么 HIGHLIGHT LINK 使用 .contrast 中的样式？

预期的行为是 HIGHLIGHT LINK 是蓝色的，带有绿色的悬停状态，而不是白色的，带有红色的悬停状态。

就声明段长度而言，它们具有相同的选择性，并且根本没有 ID 在起作用。我知道最后是因为 .contrast 是在 .highlight 之后定义的，但我的困惑是因为在我看来，HIGHLIGHT LINK 是一个.highlight 类的直接后代，因此比.contrast 更接近。

注意: 请不要建议使用 > 来解决这个问题，他们并不总是直系后代。

编辑 让我说清楚，我明白效果是由于订单。我的困惑是关于 highlight 的选择性由于它的接近而不是更接近的匹配。

让我将我的问题调整为... 在这种情况下，您应该如何允许类嵌套并维护它们的属性？这些应该能够以任一顺序嵌套。

Answer 1

这是我的(相当冗长的)解决方案(jsfiddle):

* { box-sizing: border-box; font-size: 14px; line-height: 1.5; padding:10px; margin:10px; }

.highlight { background-color:#B9D4FA; color:#000000; }
.contrast { background-color:#3E6FB5; color:#FFFFFF; }

.contrast a:link,
.contrast a:visited,
.highlight .contrast a:link,
.highlight .contrast a:visited { 
    color:#FFFFFF;

}

.contrast a:hover,
.contrast a:active,
.highlight .constrast a:hover,
.highlight .contrast a:active {
    color: #990000;
}

.highlight a:link,
.highlight a:visited,
.contrast .highlight a:link,
.contrast .highlight a:visited {
    color:#3E6FB5;

}

.highlight a:hover,
.highlight a:active,
.contrast .highlight a:hover,
.contrast .highlight a:active {
    color:#009900;
}

我认为它可以完成您想要它做的事情，但其他人可能能够比我更简洁地完成它 (!)。