最小高度、高度、类别、id优先级

Question

我有一个类，它在整个项目中接收相同的高度。我想要一个作为类成员的div动态扩展。所以我给div一个ID（更具体）。我还认为最小高度优先于高度（这应该允许div扩展）。但是，当div的类设置了高度时，它不会展开。如果我去掉高度，这是有效的，但在这种情况下，不应该有两个度的特异性吗？小提琴来了：

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

不工作：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();

Answer 1

最小高度不优先于高度。ID的规则优先于类的规则。因此，在ID选择器中添加一个height:auto，就会使该容器的静态高度无效。

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

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

.lessSpecific
{
    border: 1px solid black;
    height: 100px;
}
#specific
{
    min-height: 300px;
    height: auto;
}

或者这个，如果你喜欢

.lessSpecific
{
    border: 1px solid black;
    height: 100px;
}
#specific.lessSpecific
{
    min-height: 300px;
    height: auto;
}