Question

我需要通过添加新类来覆盖width:70% !important设置为width:100% !important的默认css。另外我想保留现有的类和css，如：

.abc{ width: 75% !important; }

重写css将是

.newAbc{ width: 100% !important }

在这种情况下，新添加的css需要覆盖现有的css！

有什么方法可以锻炼吗？

Answer 1

将!00%更改为100%，以使CSS规则有效。

＆＃13;

.abc {
  width: 70% !important;
  border: 1px solid #ddd;
  height: 5px;
}

.newAbc {
  width: 100% !important;
}

＆＃13;

<div class="abc"></div>
<div class="abc newAbc"></div>

＆＃13;

Answer 2

这里有3个选项。

更改＆＃39;！00％＆＃39;到＆＃39; 100％＆＃39;。
将第二个css类放在第一个（newabc AFTER abc）
如果您有要引用的父类，请事先添加

＆＃13;

.abc{
   width: 75% !important;
}

.parent .newAbc{ 
  width: 100% !important 
}

＆＃13;

Answer 3

检查这个小提琴。 https://jsfiddle.net/trupti11/wLxepqvq/1/

HTML

<div class="main">
<div id="d1" class="box a1"></div>
<div id="d2" class="box a1"></div>
</div>
<br/>

<div id="b1" class="btn">Add width</div>
<div id="b2" class="btn">Remove width</div>

JS

   $('#b1').click(function() {
    $('#d2').addClass('a2');
    })

    $('#b2').click(function() {
    $('#d2').removeClass('a2');
    })

CSS

.main { display:block; width:500px; height:120px; border:solid 2px #666; }
.box { background-color:#ffc; display:block; position:relative; border: solid 1px #666; height: 50px; }
.btn { background-color:#fcc; display:block; position:relative; border: solid 1px #666; height: 20px; margin: 5px; padding: 5px; width:100px; }
.a1 {width: 50% !important; }
.a2 {width: 100% !important; }

如何通过添加新类来覆盖！important到动态宽度的默认宽度

3 个答案: