如何使用！重要的動態寬度重寫默認寬度通過添加新類

我需要通過添加新類來覆蓋由width:70% !important設置爲width:100% !important的默認css。此外，我想保持現有的類和CSS一樣：如何使用！重要的動態寬度重寫默認寬度通過添加新類

.abc{ width: 75% !important; }

和壓倒一切的CSS將

.newAbc{ width: !00% !important }

在這種情況下，新添加的CSS需要重寫現有的CSS！

有什麼辦法可以鍛鍊嗎？

來源

2017-07-03 Bharat

如果您添加了！重要的你的第二個CSS將「第一個文件後加載第二個CSS文件重寫「第一個。只有在這裏解決方案，或使用jquery – user5014677

@ prasad，有沒有什麼辦法，現有的CSS和重寫CSS都可以工作！ – Bharat

-1

檢查這個小提琴。 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>

$('#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; }

來源

2017-07-03 07:30:20 pravid

謝謝@trupti， – Bharat

更改!00%至100%以使CSS規則有效。

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

 
.newAbc { 
 
    width: 100% !important; 
 
}

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

來源

2017-07-03 07:15:35 Justinas

這裏有3個選項。

將'！00％'更改爲'100％'。
把第二個CSS類後的第一個（newabc AFTER ABC）
如果你有一個父類引用，添加前手

.abc{ 
 
    width: 75% !important; 
 
} 
 

 
.parent .newAbc{ 
 
    width: 100% !important 
 
}

來源

2017-07-03 07:17:20 MegaTron

如何使用！重要的動態寬度重寫默認寬度通過添加新類

回答

相關問題