최소 높이, 높이, 클래스, ID 우선 순위

Question

프로젝트 전체에서 동일한 높이를받는 클래스가 있습니다. 클래스의 멤버 인 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(); 

Answer 1

최소 높이가 높이보다 우선하지 않습니다. ID의 규칙은 클래스의 규칙보다 우선합니다. 따라서 ID 셀렉터에 height : auto를 추가하면 해당 컨테이너의 고정 높이가 무효화됩니다.

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

나는 그것이 유용한 규칙은 특정 요소에 대한 재설정 할 필요가있는이 같은 상황에 대해 CSS의 기본 값을 찾기 위해 W3 스쿨을 참조 찾을 수 있습니다. 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; 
}