Question

所以我已经获得了一个带有react-router值的选择框的文本颜色，并且我正在努力使用jQuery再次更改它。

!important

有什么想法吗？

Answer 1

最好的解决方案是根本不使用!important并重构您的css（以及可能的标记），以便正确的选择器specificity允许您在没有!important的情况下执行所需操作。

话虽如此，覆盖!important的一般方法是添加另一个带有!important的CSS规则，具有更高的特异性或相同的特异性，但稍后定义。这是有效的，因为在特异性并列中，最后定义的规则获胜。

由于我们需要使用JS / jQuery而不是CSS，因此有三种可能的解决方案：

我们可以通过添加内联!important规则，使用更具体的规则击败!important。

这样做的原因是内联样式总是覆盖外部样式表中的任何样式，因此可以被认为具有最高的特异性。

var currentStyle = $('#test').attr('style') || '';
$('#test').attr('style', currentStyle + ' color:red !important');

#test {
  color: blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">
  This text is RED, not BLUE
</div>

我们可以通过创建包含此规则的另一个样式表并将其附加到!important来使用后来定义的特定!important规则来优先<head>。

$('<style>#test { color:red !important; }</style>').appendTo('head');

#test {
  color: blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">
  This text is RED, not BLUE
</div>

基本上是2.的另一个版本，我们将新规则附加到最后一个样式的末尾，而不是创建新样式：

var lastStyle = $('style').last();
lastStyle.html(lastStyle.html() + '\n#test { color:red !important; }');

#test {
  color: blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">
  This text is RED, not BLUE
</div>

其他资源：