CSS 规则优先级

Question

给定以下标记...

<div id="Header">
     <a href="#" class="Highlight">foo</a>
</div>

还有下面的样式表...

/******************Exceptions******************/
#Footer, #Header,
#Footer a, #Header a { color: #f8f8f8; }


/******************Classes******************/
.Highlight, a.Highlight { color: #B1D355; }
.Notification, a.Notification { color: Red; }

为什么我的链接仍然是灰白色 (F8F8F8) 而不是绿色 (B1D355)？

不应该使用 Highlight 类覆盖 Header 和 Footer 的颜色设置，因为它在它们的声明之后？

Answer 1

一切都与重量有关。 ID 选择器胜过类选择器。

#Footer a

总是优先于

.Highlight 或 .Highlight a

制作你的选择器

#Footer .highlight a

你应该没问题。