최소 높이 속성 재정의

Question

가능한 경우 특정 div에 대한 클래스의 min-height 속성을 재정의 할 수 있습니까?

예 :

.someclass { 
 
    min-height: 200px; 
 
}

<div class="someclass"> 
 
    -- content -- 
 
</div>

내가 사업부에 style="min-height:100px!important;" 같은 것을 사용하여 시도했지만 그 작동하지 않습니다.

Answer 1

!important 선언을 표준 스타일 시트에 사용하는 것은 매우 나쁜 습관입니다. 스타일 시트의 계단식 특성을 손상시키기 때문에 모든 비용을 들이지 않고 피하십시오.

more specific selector을 사용하여 이전 스타일을 덮어 씁니다.

스타일을 기본값으로 재설정하려면 특성에 따라 auto|inherit|0을 사용하십시오. min-height의 경우 0입니다. CSS3는 바람직하게 사용 되어야만하는 특별한 값 inital을 도입합니다. 그러나 불행히도 IE support으로 제한됩니다.

귀하의 경우보다 높은 특이성 (ID 또는 인라인 스타일 - 바람직하지는 않음)이있는 선택자의 min-height:100px;은 트릭을 수행해야합니다.

let div = document.querySelector("#morespecific"); 
 

 
div.innerHTML = "This div has its min-height set to: "+window.getComputedStyle(div).minHeight;

.someclass{ 
 
    min-height:200px; 
 
    border:1px solid red; 
 
} 
 
#morespecific{ 
 
    min-height:100px; 
 
    border-color:blue; 
 
}

<div id="morespecific" class="someclass"> 
 
-- content -- 
 
</div>

Answer 2

!important 플래그는 다음과 같이 세미콜론 내부에 갈 필요 :

.someclass {min-height: 200px !important;} 

을 또한, 당신이 그것을 도울 수 있다면 당신이 정말로 !important 플래그를 사용하지 않아야합니다. 재정의 규칙은 원래 규칙보다 구체적이어야합니다.

specificity and inheritance에서 읽어야한다고 생각합니다.

Answer 3

인라인 스타일은 너무

<div class="someclass" style="height: 50px;">...</div> 

는 스타일 시트의 규칙을 무시, CSS 스타일을 재정의합니다. 그러나 일반적으로이 문제를 해결하기위한 좋은 해결책은 아닙니다. 선호하는 솔루션은 외부 CSS에서 높은 특이성을 가진 선택자를 사용하는 것입니다.

Answer 4

난 그냥 분 물건을 무시할 0을 사용하는 것보다 더 좋은 답을 찾을 수 및 최대 물건을 대체 할 1,000% 같은 것을 사용할 수 없었다.