覆盖CSS样式

Question

所以我很难理解如何覆盖固有的css规则，例如，我的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;
}

这是基本特异性规则的一部分。您可以在这里进一步阅读

并尽量避免!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 href内的文本周围添加跨度，如下所示

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

Answer 5

如果要用较早的样式覆盖文档后面介绍的CSS样式，请使用!important声明。

例如：

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