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。

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

编辑让我明白我明白效果是由于订单造成的。我的困惑在于高亮度的选择性因为接近而不是更接近的匹配。

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

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;
}

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

Answer 2

你已经知道了

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

我的困惑在于高光的选择性因为接近而不是更接近的匹配。

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

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

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

你应该如何允许类在这样的情况下嵌套和维护它们的属性？

有些方法：

使用灵活性较低的组合子，例如儿童组合子>
了解您的HTML并相应地订购CSS规则
使用JavaScript

由父级覆盖的嵌套元素类

2 个答案: