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

Question

我有一个类在整个元素中具有相同的高度。我想要一个作为类成员的 div 动态扩展。所以我给div一个ID(更具体)。我还认为 min-height 优先于 height (这应该允许 div 扩展)。但是当它的类设置了高度时，div将不会扩展。如果我删除高度，它会起作用，但在这种情况下不应该有两个更具体的程度吗？这是 fiddle :

工作中: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;
}