css - CSS样式不是'级联'？

Question

我正在更新某人的网站。他们的标记选择<a>标签是这样的：

#wrapper a{color: red;}

这很好。但是，如果我创建一个<div>内部包装器并将其<a>标记为我自己的样式，例如：

.mydiv a{color: white;}

它根本不起作用 -color:white我的 in<div>被包装器中的 color:red 覆盖，即使 .mydiv css 位于#wrapper我的外部样式表上 css 的下方。更重要的是所有其他样式 - 背景颜色，边框等 - 工作正常！

Answer 1

这称为特异性。

带有id属性的选择器比带有属性的选择器更具体class（前者指向单个元素，而后者指向多个元素），因此id无论顺序如何，带有 的选择器都优先于您的选择器。

您的选择器需要更具体才能覆盖其他选择器：

#wrapper .mydiv a{color: white;}

Answer 2

您的 CSS 规则被覆盖的原因是样式规则的优先级在很大程度上取决于定义它们的特殊性。

.myClass a没有那么具体#myID a，因为与 ID 相比，类选择意味着受规则影响的元素范围更广。为确保您的规则优先于旧规则，只需将#wrapper .mydiv a其用作选择器，从而增强规则的特异性以超越旧规则。