2

我有一个在整个项目中接收相同高度的类。我想要一个作为类成员的 div 动态扩展。所以我给 div 一个 ID（更具体）。我还认为 min-height 优先于 height （这应该允许 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();
4

1 回答 1

4

最小高度不优先于高度。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;
}
于 2013-07-09T20:37:48.253 回答