嵌套元素的父类覆盖

我遇到了一个真正令人沮丧的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）

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

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

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

注意：请不要建议使用>来解决这个问题，它们并不总是直接的后代。

编辑让我明白我明白，效果是由于秩序。我的困惑是关于突出的选择性由于其接近而不是更接近的匹配。

让我调整我的问题...... 你应该如何让类在这样的情况下嵌套并保持属性？这些应该能够以任一顺序嵌套。

来源

2014-11-21 oucil

这里是我的（而啰嗦）溶液（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; 
}

我认为这是你想要它做的事情，但其他人可能能够做到这一点更简洁比我有（！）。

来源

2014-11-21 19:58:16 soulprovidr

我说的对不对在我的问题中，我知道效果来自命令，但我的问题是关于'.highlight'的选择性不能超越临界点因为它是'a'，所以''.contrast'是更近的后代。 – oucil 2014-11-21 20:00:27

@oucil：对不起，请参阅我的编辑。我引用了另一个解释规则应用方式的答案。 – soulprovidr 2014-11-21 20:01:30

我试图实现能够嵌套这些类以任何顺序，这是不明确的，我已经更新了这个问题。该解决方案不允许相反。 – oucil 2014-11-21 20:08:12

您已经知道

的规则具有相同的specificity
因此，应用是最后一个

我的困惑是关于不是一大亮点选择性由于距离较近，所以更接近匹配。

CSS规范并未将您的邻近度定义纳入考虑范围。

这些应该能够以任一顺序嵌套。

这些可能有能够以任一顺序嵌套。但他们不是。

你应该如何让类在这些情况下嵌套并保持属性？

一些方法：

使用不够灵活组合程序，如儿童组合子>
知道你的HTML和秩序的CSS规则相应
使用JavaScript

来源

2014-11-21 20:24:29 Oriol

这确实是我想象中的第五次检查，但这只是一厢情愿的想法。也就是说，我上面接受的答案只是明确地声明了不同的嵌套顺序与正确的结果，而不是使声明膨胀一点，它就像一个魅力。 – oucil 2014-11-21 20:41:32

嵌套元素的父类覆盖

回答

相关问题