如何通过id覆盖div？

Question

我想用 id 编辑我的 div，但在某个地方它不会加载，因为它已经定义了，我无法覆盖它。也许你们知道这里发生了什么。

这是我想编辑这个 div 的问题，但高度已经定义并且似乎不会覆盖..可能是什么问题？ https://gyazo.com/03c4e641ba55863f82177a37214d7516

div#main_slider{

  height: 471px;

  visible: hidden;

}

<div id="main_slider" class="rev_slider fullscreenbanner" data-version="5.1.1RC">

</div>

Answer 1

假设你有一个简单的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;&nbsp; }<div id="main_slider" > My Div </div>important这是不使用仅选择选择器的另一种解决方案id。#main_slider{&nbsp; &nbsp;height: 471px;&nbsp; &nbsp;border:1px solid black;&nbsp; &nbsp;font-size: 24px;&nbsp; }<div id="main_slider" class="rev_slider fullscreenbanner" data-version="5.1.1RC">My Div</div>

Answer 2

正如您所说，id已经定义了，您可以选择以下选项来解决此问题 -使用!important对特定的内容使用内联样式div提供另一个 divid并使用这个新的id来覆盖。

Answer 3

内联样式您发布的链接演示了具有内联样式的 DIV。这与已经通过其他 CSS 样式应用的样式不同，并且不能被普通样式规则覆盖例子#main_slider{&nbsp; height: 100vh;&nbsp; background: red; /* <-- won't override the inline style */}<div id="main_slider"&nbsp;&nbsp; class="rev_slider fullscreenbanner"&nbsp;&nbsp; data-version="5.1.1RC"&nbsp; style="background: yellow;"></div>覆盖内联样式您有两种选择将样式应用于具有内联样式的元素。1.更多内联样式这可以通过以下两种方式之一来完成：直接在元素上或通过脚本。在示例中，黄色背景直接应用于元素。更有可能的是，如果您一开始就没有添加内联样式，那么它会通过脚本动态更新。您还可以使用脚本来更新它，如下面的示例所示。例子main_slider.style.backgroundColor = 'red';#main_slider{&nbsp; height: 100vh;}<div id="main_slider"&nbsp;&nbsp; class="rev_slider fullscreenbanner"&nbsp;&nbsp; data-version="5.1.1RC"&nbsp; style="background: yellow;"></div>请注意，唯一的区别是将 CSS 移至 JavaScript。在这种情况下，red覆盖了以前存在的yellow.2. 使用!important该!important标志使其优先于内联样式和非！重要样式的特殊性；但是，此方法应作为最后的手段使用。以后覆盖的唯一方法!important是使用更多它们（除了特异性之外）。#main_slider{&nbsp; height: 100vh;&nbsp; background: red !important;}<div id="main_slider"&nbsp;&nbsp; class="rev_slider fullscreenbanner"&nbsp;&nbsp; data-version="5.1.1RC"&nbsp; style="background: yellow;"></div>