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

Question

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

1. 的site.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

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

.ui-widget-content a

使之更具体的比.closeClueTipLink,即使.closeClueTipLink在以后的样式表中找到.

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