css - 为什么这个 css 覆盖了另一个？

Question

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

1. 网站.css
2. jquery-ui.css

Site.css 列在 jquery-ui css 下方

我的页面上有一个看起来像这样的链接:

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

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

我不明白为什么 .ui-widget-content(颜色为 #222222)覆盖 .closeClueTipLink(颜色:蓝色) site.css 在 jquery 之下。

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

Answer 1

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

.ui-widget-content a

让它更多specific而不是 .closeClueTipLink，即使 .closeClueTipLink 是在以后的样式表中找到的。

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