Question

我有这个HTML：

＆＃13;

.text-success {
    width: 75px;
    padding: 1px;
    color: #4c9709;
}

.SomethingOrOther {
    padding: 0px 0px 0px 37px !important;
    color: #FFA500 !important;    
}

.lineheight {
    line-height: 21px !important;
}

＆＃13;

<b><span id="lblSomethingOrOther" class="text-success lineheight SomethingOrOther"><a onclick="SomeAction('Something', 'Other');"><u>Text which appears incorrectly</u></a></span></b>

＆＃13;

在text-success课程中，我们应用了一些内容，但其中一个是color: #4c9709;（绿色）。 SomethingOrOther类也适用color: #FFA500 !important;（橙色）但是当我运行软件时，文本的颜色是错误的;它使用text-success的绿色。

为什么它不尊重!important标志并使用第二种颜色？尝试了IE，Chrome和Firefox。

我可能可能从HTML中删除text-success类，但这在我们的Live服务器上运行正常但不是我们的本地测试服务器，我试图找出原因...

Answer 1

问题似乎在于特异性值。 css越具体，层次结构越高。例如。

一个类比id更具体，所以id赢得任何覆盖内联样式比id更具体，因此样式获胜。

由于css的特殊性，重要规则可能已经到位，但不起作用。在类之前添加元素类型应该使特异性胜过其他规则（除了内联！重要）

示例css：

.class {color: #fff;}
#id {color: #000;} /*id will win*/

span.class {color: #fff;}
#id {color: #000;} /*id will lose because span.class narrows down selectors moreso than #id*/

Answer 2

试试这些代码，它有效。你可以看到它here。

<span id="lblSomethingOrOther" class=" lineheight SomethingOrOther"> 
<span >this is blue.</span>
<a onclick="SomeAction('Something', 'Other');"><u class="text-success">this is green.</u>
</a>
</span>

Css：

.SomethingOrOther {
    padding: 0px 0px 0px 37px !important;
    color: blue !important;    
}
.text-success {
    width: 75px;
    padding: 1px;
    color: green ;
}
.lineheight {
    line-height: 21px !important;
}

你必须在childes或父节点上的父节点和其他css attr上使用！important css attr。

没有应用带有！important的CSS类？

2 个答案: