为什么这个 css 会覆盖另一个 css？答案

【问题标题】：Why is this css overriding this other one?为什么这个 css 会覆盖另一个 css？
【发布时间】：2012-03-30 20:43:07
【问题描述】：

我的页面中有 2 个 css 文件：

Site.css 列在 jquery-ui css 下方

我的页面上有一个如下所示的链接：

 <a class='closeClueTipLink'>close</a>

问题是链接显示为黑色而不是正常的蓝色文本。当我使用萤火虫找出原因时，我看到了这个：

我不明白为什么 .ui-widget-content（颜色为 #222222）会覆盖 .closeClueTipLink（颜色为：蓝色），因为site.css 在 jquery 之下。

有什么想法或建议为什么会发生这种排序？

【问题讨论】：

【解决方案1】：

因为在.ui-widget-content 之后有一个a 选择器：

.ui-widget-content a

使specific 比.closeClueTipLink 更多，即使.closeClueTipLink 出现在后面的样式表中。

您可以通过将相同的类型选择器添加到您的其他规则来轻松平衡这一点，这样您就可以得到a.closeClueTipLink，使两个选择器同样具体（1 个类型和 1 个类）。然后，作为稍后定义和加载的规则，将应用并且您的链接文本将是蓝色的。

【讨论】：

【解决方案2】：

快速修复：

在你的类选择器之前添加一个“a”：

a.closeClueTipLink {

说明：

与Specificity [details]有关。

.ui-widget-content a 更“具体”，因为它引用了一个类和一个元素，而不是你的只引用一个类。因此，.ui-widget-content a 将覆盖任何不太具体的内容，无论代码的位置/位置如何。'

通过在您的选择器前添加一个“a”，您可以使其还引用一个元素和一个类，因此它不再那么具体，并且将使用位置来确定。

例子：

/* css */
div p { color: red; }
p { color: blue; }

<!-- html -->
<div><p>Text</p></div>

上一段中的文本将是红色，因为第一个 CSS 项比第二个更具体。

【讨论】：

【解决方案3】：

.ui-widget-content a 比 .closeClueTipLink 更具体，因此无论它们按什么顺序放置，它都会覆盖它。

改为阅读

a.closeClueTipLink

【讨论】：

【解决方案4】：

~~因为.ui-content-content a { }是在之前的样式.closeClueTipLink之后加载的。~~

我很确定jquery...tom.css 是在site.css 之后加载的，所以后面定义的样式会覆盖之前定义的样式。

有一些方法可以解决这个问题：

【讨论】：