如果您在浏览器中查看以下代码，链接将显示为红色。我希望它是绿色的，因为辅助 div 嵌套在主 div 中。看起来颜色是由 css 文件中元素的顺序决定的。如果我在 .primary 之后移动 .secondary，则链接为绿色。
<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 唯一知道的与具有相同特异性的选择器有关的是选择最近的一个
因此，你需要让 child 的特殊性超过第一个，一种方法是放
.primary .secondary a {
color:green;
}
另一种方法是将元素类型放在类之外
这就是为什么将 CSS 结构化为 HTML 中布局的页面(父元素在子元素之前)的正确格式的原因
有关如何确定特异性的更多信息，check here
关于html - 基于父 div 的 CSS 优先级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22259735/