CSS样式不会“层叠”？

Question

我正在更新某人的网站。他们选择 <a> 标签的标记方式如下：

#wrapper a{color: red;}

这很好。但如果我在包装器内创建一个 <div> ，并给它自己的样式添加 <a> 标签，例如：

.mydiv a{color: white;}

我的 <div> 中的 color:white 属性受到了外层包裹元素中 color:red 属性的覆盖，尽管我的样式表中 .mydiv 的 CSS 代码在 #wrapper 之后。但其他样式如背景颜色、边框等却能正常工作！

- MeltingDog

Answer 1

这被称为优先级。

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

为了覆盖另一个选择器，您的选择器需要更具体。

#wrapper .mydiv a{color: white;}

- Blender

---

谢谢，问题解决了 - 之前应该想到这个。 - MeltingDog

Answer 2

你的 CSS 规则被覆盖的原因是样式规则的优先级主要取决于它们定义的特定性。

.myClass a 比 #myID a 不够具体，因为类选择器意味着更广泛的元素范围受到规则的影响，而 ID 则不然。为了确保你的规则优先于旧规则，只需使用 #wrapper .mydiv a 作为你的选择器，从而增强你的规则的特定性以超过旧规则。

- Aaron