覆盖css样式

Question

所以我很难理解如何覆盖css规则inhered，我的css规则在某些类中定义，例如

首先我有这个HTML

<a class="formatText" style="font-weight:bold">Accesorios 4x4</a>

我定义了一个像这样的类formatText

.formatText{
font-size:14px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF;
}

从不如此，因为我在某些方面使用jquery-ui与该元素匹配的规则是这个

.ui-widget-content a {
     color: black;
}

如何在没有通过ID定义css选择器的情况下修复此问题。??

Answer 1

.ui-widget-content a.formatText{
   font-size:14px;
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #FFF;
}

它是基本特异性规则的一部分..您可以在here

中进一步阅读

并尽可能避免!important，因为它会让我们在将来相信我时会头疼。当没有希望时，将!important作为你最新的武器库。但只要特异性仍能提供帮助，就可以使用它。

Answer 2

您必须将样式规则定义为比.ui-widget-content a样式规则更具体。这可以按如下方式完成：

.ui-widget-content a.formatText {
    ...
    color: #FFF;
}

如果这不可行，您还可以将设置标记为重要：

color: #FFF !important;

Answer 3

.ui-widget-content a.formatText {
     color: #FFF;
}

完成

Answer 4

尝试在像这样的

<a style="font-weight:bold"><span class="formatText">Accesorios 4x4</span></a>

Answer 5

如果要覆盖稍后在文档中引入的CSS样式，请使用!important声明。

e.g：

.formatText{
    font-size:14px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #FFF !important;
}