CSS规则优先级

Question

CSS规则优先级

14

给定以下标记...

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

- Adam Ritenauer

4个回答

8

CSS优先级

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

.class1 { color: black; }

.class2 { color: red; }

它将是红色的。
要提高优先级，请使用！important

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

- SweenEy

在编写CSS时，应该非常谨慎地考虑使用!important。 - surfmuggle

2

CSS中ID的优先级高于class：

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

- Amy B

1

CSS规则不仅仅是基于“最后解析，最后应用”来应用的。它还取决于规则对该元素的特定性和唯一性。由于您只指定了一个class选择器，包含id的路径会获得更高的优先级。

- Agent_9191

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robusto · Accepted Answer

这是关于权重的问题。一个类选择器会被一个ID选择器覆盖。

#Footer a

将始终优先于

.Highlight或.Highlight a

使您的选择器

#Footer .highlight a

你应该没问题了。