Html 覆盖 min-height 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11204113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overriding min-height property
提问by nik
If possible, how can I override a min-heightproperty of a class for a particular div?
如果可能，如何覆盖min-height特定 div 的类的属性？
Example:
例子：
.someclass {
min-height: 200px;
}<div class="someclass">
-- content --
</div>I have tried using something like style="min-height:100px!important;"on the div but that doesn't seem to work.
我试过style="min-height:100px!important;"在 div 上使用类似的东西，但这似乎不起作用。
回答by Christoph
it is very bad habit to use !importantdeclarations in your standard stylesheets. Avoid it at all costs, because it breaks the cascading nature of the stylesheets.
!important在标准样式表中使用声明是非常坏的习惯。不惜一切代价避免它，因为它破坏了样式表的级联特性。
Use a more specific selectorto override previous styles.
使用更具体的选择器来覆盖以前的样式。
To reset styles to the default, use auto|inherit|0depending on the attribute. For min-heightit's 0. CSS3 introduces the special value initalwhich should be preferably used - but unfortunately it has limited IE support.
要将样式重置为默认值，请auto|inherit|0根据属性使用。因为min-height它是0. CSS3 引入了inital应该优先使用的特殊值- 但不幸的是它对IE 的支持有限。
In your case min-height:100px;in a selector with higher specificity (either id or inline style - preferably not the latter) should do the trick.
在您的情况下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>回答by LookingLA
I couldn't find any better answer than to just use 0 to override min stuff, and use something like 1000% to override max stuff.
我找不到比仅使用 0 覆盖最小内容并使用 1000% 之类的内容覆盖最大内容更好的答案。
回答by Jezen Thomas
An !importantflag needs to go inside the semi-colon, like this:
一个!important标志需要放在分号里面，像这样：
.someclass {min-height: 200px !important;}
Furthermore, you shouldn't really be using !importantflags if you can help it. An overriding rule needs to be more specific than the original rule.
此外，!important如果可以提供帮助，您不应该真正使用标志。覆盖规则需要比原始规则更具体。
I think you need to read up on specificity and inheritance.
我认为您需要阅读特殊性和继承性。
回答by AdamWhite
Inline styles override CSS styles, so
内联样式覆盖 CSS 样式，因此
<div class="someclass" style="height: 50px;">...</div>
overrides the rule in your stylesheet. However, it's generally not a good solution to fix this problem. The preferred solution would be to use a selector with a higher specificity in your external css.
覆盖样式表中的规则。但是，这通常不是解决此问题的好方法。首选的解决方案是在外部 css 中使用具有更高特异性的选择器。
