为什么这个css压倒了另一个？

Question

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

1. 的site.css
2. 的jquery-ui.css

Site.css列在jquery-ui css下面

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

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

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



我不明白为什么 .ui-widget-content （颜色为＃222222）覆盖 .closeClueTipLink （颜色为蓝色）给出的site.css位于jquery之下。

为什么要进行这种排序的任何想法或建议？

Answer 1

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

.ui-widget-content a

比.closeClueTipLink更多specific，即使在以后的样式表中找到了.closeClueTipLink。

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

Answer 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项目比第二个更具体。

Answer 3

因为在前一个样式.ui-content-content a { }之后加载了.closeClueTipLink。

我非常确定在jquery...tom.css之后加载site.css，因此稍后定义的样式会覆盖以前定义的样式。

您可以通过多种方式修改此问题：

1. 精确定位选择器，如.ui-content-content a.closeClueTipLink
2. 在颜色定义结束时使用!important。 color: #222 !important; ^[不推荐]

Answer 4

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

将其更改为

a.closeClueTipLink