我想用 id 編輯我的 div，但在某個地方它不會加載，因為它已經(jīng)定義了，我無法覆蓋它。也許你們知道這里發(fā)生了什么。這是我想編輯這個 div 的問題，但高度已經(jīng)定義并且似乎不會覆蓋..可能是什么問題？ https://gyazo.com/03c4e641ba55863f82177a37214d7516div#main_slider{ height: 471px; visible: hidden;}<div id="main_slider" class="rev_slider fullscreenbanner" data-version="5.1.1RC"></div>
3 回答
斯蒂芬大帝
TA貢獻1827條經(jīng)驗 獲得超8個贊
假設(shè)你有一個簡單的div可以用來!important覆蓋。
請注意important不要將其用作最后一個選項，因為它important會覆蓋您定義的所有屬性。
!important : ignore subsequent rules, and any usual specificity issues, apply this rule!'
div#main_slider{
height: 471px !important;
visible: hidden;
border:1px solid black;
font-size: 24px !important;
}
<div id="main_slider" > My Div </div>
important這是不使用僅選擇選擇器的另一種解決方案id。
#main_slider{
height: 471px;
border:1px solid black;
font-size: 24px;
}
<div id="main_slider" class="rev_slider fullscreenbanner" data-version="5.1.1RC">My Div
</div>
largeQ
TA貢獻2039條經(jīng)驗 獲得超8個贊
正如您所說，id已經(jīng)定義了，您可以選擇以下選項來解決此問題 -
使用
!important對特定的內(nèi)容使用內(nèi)聯(lián)樣式
div提供另一個 div
id并使用這個新的id來覆蓋。
慕標(biāo)5832272
TA貢獻1966條經(jīng)驗 獲得超4個贊
內(nèi)聯(lián)樣式
您發(fā)布的鏈接演示了具有內(nèi)聯(lián)樣式的 DIV。這與已經(jīng)通過其他 CSS 樣式應(yīng)用的樣式不同，并且不能被普通樣式規(guī)則覆蓋
例子
#main_slider{
height: 100vh;
background: red; /* <-- won't override the inline style */
}
<div id="main_slider"
class="rev_slider fullscreenbanner"
data-version="5.1.1RC"
style="background: yellow;">
</div>
覆蓋內(nèi)聯(lián)樣式
您有兩種選擇將樣式應(yīng)用于具有內(nèi)聯(lián)樣式的元素。
1.更多內(nèi)聯(lián)樣式
這可以通過以下兩種方式之一來完成：直接在元素上或通過腳本。在示例中，黃色背景直接應(yīng)用于元素。更有可能的是，如果您一開始就沒有添加內(nèi)聯(lián)樣式，那么它會通過腳本動態(tài)更新。您還可以使用腳本來更新它，如下面的示例所示。
例子
main_slider.style.backgroundColor = 'red';
#main_slider{
height: 100vh;
}
<div id="main_slider"
class="rev_slider fullscreenbanner"
data-version="5.1.1RC"
style="background: yellow;">
</div>
請注意，唯一的區(qū)別是將 CSS 移至 JavaScript。在這種情況下，red覆蓋了以前存在的yellow.
2. 使用!important
該!important標(biāo)志使其優(yōu)先于內(nèi)聯(lián)樣式和非！重要樣式的特殊性；但是，此方法應(yīng)作為最后的手段使用。以后覆蓋的唯一方法!important是使用更多它們（除了特異性之外）。
#main_slider{
height: 100vh;
background: red !important;
}
<div id="main_slider"
class="rev_slider fullscreenbanner"
data-version="5.1.1RC"
style="background: yellow;">
</div>
- 3 回答
- 0 關(guān)注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消