如何通过id覆盖div？

Question

我想用 id 编辑我的 div，但在某个地方它不会加载，因为它已经定义了，我无法覆盖它。也许你们知道这里发生了什么。这是我想编辑这个 div 的问题，但高度已经定义并且似乎不会覆盖..可能是什么问题？ https://gyazo.com/03c4e641ba55863f82177a37214d7516div#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;

  }

<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>

Answer 2

正如您所说，id已经定义了，您可以选择以下选项来解决此问题 -

• 使用!important

• 对特定的内容使用内联样式div

• 提供另一个 divid并使用这个新的id来覆盖。

Answer 3

内联样式

您发布的链接演示了具有内联样式的 DIV。这与已经通过其他 CSS 样式应用的样式不同，并且不能被普通样式规则覆盖

例子

#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>

覆盖内联样式

您有两种选择将样式应用于具有内联样式的元素。

1.更多内联样式

这可以通过以下两种方式之一来完成：直接在元素上或通过脚本。在示例中，黄色背景直接应用于元素。更有可能的是，如果您一开始就没有添加内联样式，那么它会通过脚本动态更新。您还可以使用脚本来更新它，如下面的示例所示。

例子

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>

请注意，唯一的区别是将 CSS 移至 JavaScript。在这种情况下，red覆盖了以前存在的yellow.

2. 使用!important

该!important标志使其优先于内联样式和非！重要样式的特殊性；但是，此方法应作为最后的手段使用。以后覆盖的唯一方法!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>