最小高度，高度，类，id优先级。

I have a class that receives the same height across the project. I want one div that is a member of the class to expand dynamically. So I give the div an ID (more specificity). I was also under the impression that min-height would take precedence over height (which should allow div expansion). But the div will not expand when its class has a height set. It works if I remove the height, but shouldn't there be two degrees of more specificity in this case? Here's the fiddle:

我有一个在整个项目中得到相同高度的类。我想要一个div，它是这个类的一个成员来动态扩展。所以我给了div一个ID(更具体)。我还认为，米高会优先于高度(这应该允许div扩展)。但是当它的类有一个高度集时，div不会展开。如果我移除高度，它会起作用，但在这种情况下不应该有两个程度的特殊性吗?这是小提琴:

Working: http://jsfiddle.net/farinasa/WHn9t/

工作:http://jsfiddle.net/farinasa/WHn9t/

Not working: http://jsfiddle.net/farinasa/WHn9t/2/

不工作:http://jsfiddle.net/farinasa/WHn9t/2/

HTML:

<div id="specific" class="lessSpecific">

</div>

CSS:

.lessSpecific
{
    border: 1px solid black;
    height: 100px;
}

#specific
{
    min-height: 300px;
}

JS:

var box = document.getElementById("specific");
function test() {
    for (var i = 0; i < 20; ++i)
        box.innerHTML += "Hello<br>";
}

test();

1 个解决方案

#1

Min-height does not take precedence over height. The ID's rules take precedence over the class' rules. Therefore, add a height: auto to the ID selector and you've nullified the static height for that container.

米高不高于高度。ID的规则优先于类的规则。因此，添加一个高度:自动到ID选择器，您已经取消了该容器的静态高度。

http://jsfiddle.net/WHn9t/3/

I find it useful to refer to W3Schools to find CSS default values for situations like this where a rule needs to be reset for a specific element. http://www.w3schools.com/cssref/pr_dim_height.asp

我发现引用W3Schools来查找CSS默认值是很有用的，在这种情况下，规则需要重置为特定的元素。http://www.w3schools.com/cssref/pr_dim_height.asp

.lessSpecific
{
    border: 1px solid black;
    height: 100px;
}

#specific
{
    min-height: 300px;
    height: auto;
}

or this if you prefer

或者如果你喜欢的话。

.lessSpecific
{
    border: 1px solid black;
    height: 100px;
}

#specific.lessSpecific
{
    min-height: 300px;
    height: auto;
}

#1