如果您在浏览器中查看以下代码，则链接显示为红色。我希望它是绿色的，因为次要div嵌套在主要div内。看起来颜色是由css文件中元素的顺序决定的。如果我将.secondary移到.primary之后，则链接为绿色。
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.secondary a {
color: green;
}
.primary a {
color: red;
}
</style>
</head>
<body>
<div class="primary">
<div class="secondary">
<a href="http://www.google.com">test</a>
</div>
</div>
</body>
</html>
除了更改文件中的顺序之外，如何使链接尊重其父div的颜色？
编辑：这是一个非常简化的示例。实际上，主要和次要类之间可能还有许多其他div标签。
问题是两个选择器具有相同的特异性。CSS唯一知道与相同特性的选择器有关的事情是选择最新的选择器
因此，您需要使孩子的特殊性超过最初的特殊性，一种方法是
.primary .secondary a {
color:green;
}
另一种方法是将元素类型添加到类之外
这就是为什么采用正确的格式将CSS构造为HTML布局的页面时，父母先于孩子
有关如何确定特异性的更多信息，请在此处检查
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句