CSS样式不是'级联'？

Question

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

#wrapper a{color: red;}

哪个好。但是如果我在包装器中创建一个<div>并给它<a>标签我自己的样式，例如：

.mydiv a{color: white;}

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

Answer 1

这称为specificity。

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

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

id

Answer 2

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

.myClass a的具体程度低于#myID a，因为类选择意味着规则要比ID更广泛的元素。要确保您的规则优先于旧规则，只需使用#wrapper .mydiv a作为选择器，从而提高规则的特异性，使其超过旧规则。