如何通过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;
 }

<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
使用内联样式
• 提供 div 另一个 id 并使用这个新的 id 覆盖。

Answer 3

内联样式

您发布的 link 演示了具有内联样式的 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 样式的特殊性；但是，这种方法应该作为最后的手段使用。以后覆盖 !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>