Html 嵌套元素'；s类被父类重写

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

*{框大小：边框框；字体大小：14px；行高：1.5；填充：10px；边距：10px；}
.突出显示{背景色：#B9D4FA；颜色：#000000；}
.对比度{背景色：#3E6FB5；颜色：#FFFFFF；}
.突出显示a:链接，.突出显示a:已访问{颜色：#3E6FB5；}
.突出显示a:悬停，.突出显示a:活动{颜色：#009900；}
.contrast a:link、.contrast a:visted{color:#ffffffff；}
.contrast a:hover、.contrast a:active{color:#990000；}

这是我的（相当冗长的）解决方案（）：

我认为它可以做你想做的事情，但别人可能比我做得更简洁一些。

你已经知道了

• 规则是一样的
• 因此，应用的是最后一个

我感到困惑的是，突出显示的选择性由于其接近性而不是更接近匹配

CSS规范没有考虑您对邻近性的定义

它们应该能够以任意顺序嵌套

它们本可以按任意顺序筑巢。但事实并非如此

在这种情况下，您应该如何允许类嵌套和维护它们的属性

一些方法：

• 使用不太灵活的组合符，例如子组合符

  >

• 了解您的html并相应地排序CSS规则
• 使用JavaScript

---

我在问题中说得对，我知道效果来自于顺序，但我的问题是关于

的选择性。突出显示“不覆盖
的选择性”。对比度“因为它是
a
更接近分词。@oucil:抱歉，请参阅我的编辑。我引用了另一个解释规则应用方式的答案。我试图实现能够以任意顺序嵌套这些类，这一点起初并不清楚，我已经更新了这个问题。这个解决方案不允许出现相反的情况。@oucil:我已经用一个有效的解决方案编辑了我的答案（我想）。谢谢，你和我在同一时间有相同的想法（明确定义了所有嵌套顺序），我现在正在针对一些场景测试你的解决方案。确实是我想象了一个第五次检查，根据接近度，但遗憾的是，这只是一厢情愿。这就是说，我在上面接受的答案只是明确地声明了不同的嵌套顺序，结果是正确的，除了导致声明有点膨胀之外，它的工作就像一个符咒。
* { 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;
}