覆盖最小高度属性

Question

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

示例：

.someclass {
  min-height: 200px;
}

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

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

Answer 1

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

使用more specific selector覆盖以前的样式。

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

在你的情况下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>

Answer 2

我找不到更好的答案，只是使用0来覆盖min的东西，并使用1000％的东西来覆盖最大的东西。

Answer 3

!important标志需要进入分号，如下所示：

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

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

我认为您需要阅读specificity and inheritance。

Answer 4

内联样式会覆盖CSS样式，所以

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

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