Переопределение свойства min-height

Question

Если возможно, как я могу переопределить свойство класса min-height для определенного div?

Пример:

.someclass { 
 
    min-height: 200px; 
 
}

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

Я пытался использовать что-то вроде style="min-height:100px!important;" на DIV, но это не похоже на работу.

Answer 1

Очень плохая привычка использовать объявления !important в стандартных таблицах стилей. Избегайте его любой ценой, потому что он нарушает каскадную природу таблиц стилей.

Используйте more specific selector, чтобы переопределить предыдущие стили.

Для сброса стилей по умолчанию используйте auto|inherit|0 в зависимости от атрибута. Для min-height это 0. CSS3 вводит специальное значение inital, которое должно быть предпочтительно использовано, но, к сожалению, оно ограничено IE support.

В вашем случае 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

Встроенные стили переопределения стилей CSS, так

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

отменяет правило в таблице стилей. Однако, как правило, это не очень хорошее решение для решения этой проблемы. Предпочтительным решением было бы использовать селектор с более высокой специфичностью в вашем внешнем css.

Answer 4

Я не мог найти лучшего ответа, чем просто использовать 0, чтобы переопределить мин вещи, и использовать что-то вроде 1000%, чтобы отменить максимальный материал.