CSS 规则优先级答案

【问题标题】：CSS Rule PrioritiesCSS 规则优先级
【发布时间】：2010-05-20 18:09:16
【问题描述】：

鉴于以下标记...

<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 的颜色设置，因为它位于它们的声明之后？

【问题讨论】：

标签： css

【解决方案1】：

一切都与体重有关。类选择器被 ID 选择器击败。

#Footer a

总是优先于

.Highlight 或 .Highlight a

制作你的选择器

#Footer .highlight a

你应该没事的。

【讨论】：

是的，htmldog.com/guides/cssadvanced/specificity 给出了一个不错的“深入”解释。
想通了。我想我需要重新考虑我的风格结构。谢谢！

【解决方案2】：

CSS 优先级

ID选择器>类选择器>属性选择器
对于相同的优先级，后面的优先级更高。

.class1 { 颜色：黑色; }

.class2 { 红色; }

它会是红色的。
要获得更多优先级，请使用!important

对于您的问题，#Footer 是一个 ID 选择器，其优先级高于 .Highlight 一个类选择器。

【讨论】：

use of !important should be considered very carefully.

【解决方案3】：

ID 比 CSS 中的 class 具有更高的优先级：

使用#Header a.Highlight { color: #B1D355; }

【讨论】：

【解决方案4】：

CSS 规则不仅仅基于“最后解析，最后应用”来应用。它还取决于规则对该元素的具体和独特程度。由于您只指定了 class 选择器，因此包含 id 的路径将获得更高的优先级。

【讨论】：