html - 覆盖最小高度属性

Question

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

例子：

.someclass {
  min-height: 200px;
}

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

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

score 19 · Accepted Answer

!important在标准样式表中使用声明是非常不好的习惯。不惜一切代价避免它，因为它破坏了样式表的级联性质。

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

要将样式重置为默认值，请auto|inherit|0根据属性使用。因为min-height它0。CSS3 引入了inital应该优先使用的特殊值 - 但不幸的是它对IE 的支持有限。

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

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>

score 6 · Accepted Answer

我找不到比仅使用 0 覆盖最小内容并使用 1000% 之类的内容覆盖最大内容更好的答案。

score 1 · Accepted Answer

标志需要!important放在分号内，如下所示：

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

此外，如果你能提供帮助，你不应该真的使用!important标志。覆盖规则需要比原始规则更具体。

我认为您需要阅读特异性和继承性。

score 0 · Accepted Answer

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

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

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

4 回答 4