覆盖min-height属性

Question

如果可能，我该如何在特定的div中覆盖类的min-height属性？

示例：

.someclass {
  min-height: 200px;
}

<div class="someclass">
  -- content --
</div>

我尝试在 div 上使用类似 style="min-height:100px!important;" 的东西，但似乎不起作用。

- nik

Answer 1

在标准样式表中使用!important声明是非常不好的习惯。要尽量避免这种情况，因为它会破坏样式表的级联性。

使用更具体的选择器来覆盖先前的样式。

要将样式重置为默认值，请根据属性使用auto | inherit | 0。对于min-height，可以使用0。CSS3引入了特殊值initial，最好使用它 - 但不幸的是，它的IE支持有限。

在您的情况下，使用具有更高特异性的选择器（ID或内联样式 - 最好不是后者）min-height:100px;即可解决问题。

let div = document.querySelector("#morespecific");

div.innerHTML = "This div has its min-height set to: "+window.getComputedStyle(div).minHeight;

.someclass{
    min-height:200px;
    border:1px solid red;
}
#morespecific{
     min-height:100px;
     border-color:blue;
}

<div id="morespecific" class="someclass">
-- content --
</div>

- Christoph

---

需要覆盖最小高度: 200px。最小高度：auto也无效。 - nik

谢谢您的解决方案，我在100px后漏掉了px。当图形动态出现时，有时会发生这种情况。 - nik

auto 不是 min-height 的有效属性。 - Paul Redmond

我从未说过它是;) - Christoph

Answer 2

我找不到比使用0来覆盖最小值和使用1000%来覆盖最大值更好的答案。

- LookingLA

---

是的！这是重置“min-*”CSS属性的标准方法。 - Vibhor Dube

这是逻辑答案。谢谢。 - Jair Reina

Answer 3

!important标志需要放在分号内部，就像这样：

.someclass {min-height: 200px !important;}

此外，如果可以避免的话，您不应该真正使用 !important 标志。覆盖规则需要比原始规则更具体。

我认为您需要阅读有关 特异性和继承 的内容。

- Jezen Thomas

---

使用这个解决方案很重要，不能丢弃。我需要覆盖min-height属性的值：200px。它已经使用了200px，所以这并没有帮助。 - nik

这个 div 只是没有设置 .someclass 的其他属性。所以需要覆盖它 :) - nik

你一开始没有给我们足够的信息，以便我们给出一个合适的答案。试着找到你想要样式化的元素。它可能看起来像 <div class="someclass"></div>。试着给它添加另一个类，这样它就变成了 <div class="someclass anotherclass"></div>。然后你可以使用 .someclass.anotherclass {declaration: value;}。 - Jezen Thomas

要明确的是，这只是一个例子。我并不主张使用像“someclass”或“anotherclass”这样毫无意义的类名。 - Jezen Thomas

当然，我也以someclass作为示例。 - nik

Answer 4

内联样式会覆盖CSS样式，因此

<div class="someclass" style="height: 50px;">...</div>

覆盖了样式表中的规则。然而，通常修复此问题的方法并不好。更好的解决方案是在您的外部CSS中使用具有更高特异性的选择器。

- AdamWhite

---

同样的，我省略了属性中的px，所以正确的解决方案应该是<div class="someclass" style="height: 50px;"> -- 内容 -- </div>。谢谢您的回答。 - nik