如何更改！important css属性？

Question

我有一个样式表，它具有以下属性，

.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
    color:#FFFFFF!important;   
}

我无法编辑样式表。如何将属性更改为

color:#000000!important; 

我尝试在另一个样式表中编写以下代码，

.primary-nav .suppa_rwd_button, .primary-nav .suppa_rwd_button span{
    color:#000000!important;   
}

但它不起作用。请指导。感谢。

Answer 1

为了覆盖!important规则，您必须在上一个规则之后添加相同的特定规则，或者将新规则的特异性提高为：

nav.primary-nav li.suppa_rwd_button, nav.primary-nav li.suppa_rwd_button span{
    color:#000000!important;   
}

*假设.primary-nav是nav元素，.suppa_rwd_button是li元素，您可以根据标记更改它们。

在这两种情况下，您还必须在新规则中使用!important。

参考：MDN - Specificity

Answer 2

除了Emmanuel的回答中谈到这个问题：CSS Specificity，你还尝试使用两种方法：

更改样式表的顺序

确保您的其他样式表订单高于当前版本。这包括要覆盖的样式表之后的新样式表链接

<link rel="stylesheet" href="style.css"> 
<link rel="stylesheet" href="style1.css"> <!-- Styles that will overwrite -->

内嵌HTML

如果您可以更改HTML，则可以使用：

<span style="color: #000000 !important;">

内联样式中的

!important将具有比其他类型样式更高的优先级。

Answer 3

你尝试过使用：

.primary-nav .suppa_rwd_button span{
color:#000000!important;   
}

其他方式可能是使用JavaScript：

使用JavaScript覆盖

$('.mytable td').attr('style', 'display: none !important');

干杯！