Question

我有一个下面的代码，我想要覆盖具有!important属性的padding-left元素。任何人都可以提供任何想法吗？

jQuery("a.orderLink").css("padding-left", "300px", "important");

Answer 1

您可以定义一个类/选择器，您可以在其中覆盖相同的属性。确保此定义显示在.orderLink

之后

类

document.getElementById("btn").addEventListener("click", handleClick);

function handleClick(){
  document.querySelector('.test').classList.add("override")
}

.test{
  padding-left: 10px!important;
}

.override{
  padding-left: 100px!important;
}

<a class="test" href="#"> Test </a>
<button id="btn">Override</button>

选择

document.getElementById("btn").addEventListener("click", handleClick);

function handleClick(){
  document.querySelector('.test').classList.add("override")
}

a.test.override{
  padding-left: 100px!important;
}

.test{
  padding-left: 10px!important;
}

<a class="test" href="#"> Test </a>
<button id="btn">Override</button>

注意：最好使用CSS特性代替!important。样品：

.test {
  background: #ddd;
  margin: 10px;
  padding: 5px;
}

p.test{
  background: #fff;
  border: 1px dashed gray;
}

p .test{
  background: #fff;
  border: 1px solid gray;
}

div .test{
  background: black;
  color: #fff;
}

div span .test{
  background: blue;
  color: #fff;
}

<a class="test" href="#"> Test </a>
<p class="test" href="#"> Test </p>
<p><a class="test" href="#"> Test </a></p>
<div><a class="test" href="#"> Test </a></div> <br/>

<div><span><a class="test" href="#"> Test </a><span></div>

参考：

Specifics on CSS Specificity

Answer 2

body a.orderLink {padding-left：301px！important}

Answer 3

使用cssText有一个解决方法。所以在链接的整个CSS中加入你想要的重要部分;

cssText属性将样式声明的内容设置或返回为字符串。

见下文：

function myFunction() {
  var x = document.querySelectorAll("a.orderLink.csshidepipe");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.color = "#FFC214";
    x[i].style.backgroundImage = "none";
    x[i].innerHTML = "<i class='fa fa-shopping-cart hidden-xs disabled fa-lg'></i> Order Online";
  };
  $("a.orderLink").css("cssText","padding-left:250px!important");
	
};
myFunction();

a.orderLink
{
  font-weight: bold;
  color: #028940;
  text-decoration: none;
  background: url("/~/media/C41A83E95BE94F6E873ED29BB40B90A7.png") left no-repeat;
  padding-left: 28px !important;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="orderLink">I have padding</a>

option2为链接提供一个类，并为其提供重要的样式

function myFunction() {
  var x = document.querySelectorAll("a.orderLink.csshidepipe");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.color = "#FFC214";
    x[i].style.backgroundImage = "none";
    x[i].innerHTML = "<i class='fa fa-shopping-cart hidden-xs disabled fa-lg'></i> Order Online";
  };
  $("a.orderLink").addClass("withPadding");
	
};
myFunction();

a.orderLink
{
  font-weight: bold;
  color: #028940;
  text-decoration: none;
  background: url("/~/media/C41A83E95BE94F6E873ED29BB40B90A7.png") left no-repeat;
  padding-left: 28px !important;
  margin: 0;
}
a.orderLink.withPadding {
padding-left:250px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="orderLink">I have padding</a>

这是解决您的问题，但不是核心问题。核心问题是首先使用!important。我强烈建议反对使用它。它会创建一个会影响整个编码的Snowball effect。所以尽量不要在CSS或其他任何地方使用它，除非它是唯一的方法，即便如此，重新考虑：）

如何覆盖具有！important属性的padding-left

3 个答案:

类

选择

参考：