min-height，height，class，id precedence

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選擇器添加一個高度：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; 
}