Nadpisywanie właściwości min-height

Question

Jeśli to możliwe, w jaki sposób mogę przesłonić właściwość min-height klasy dla konkretnego elementu div?

Przykład:

.someclass { 
 
    min-height: 200px; 
 
}

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

Próbowałem przy użyciu coś podobnego style="min-height:100px!important;" na div, ale to nie wydają się działać.

Answer 1

to bardzo zły zwyczaj używać deklaracji !important w standardowych arkuszach stylów. Unikaj go za wszelką cenę, ponieważ łamie kaskadowy charakter arkuszy stylów.

Użyj more specific selector, aby zastąpić poprzednie style.

Aby zresetować style do wartości domyślnych, należy użyć auto|inherit|0 w zależności od atrybutu. Dla min-height jest to 0. CSS3 wprowadza specjalną wartość inital, która powinna być preferowana - ale niestety ma ograniczoną liczbę IE support.

W twoim przypadku min-height:100px; w selektorze o wyższej specyficzności (albo id albo styl inline - najlepiej nie ten drugi) powinien załatwić sprawę.

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 flaga musi przejść wewnątrz średnikiem, tak:

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

Ponadto nie powinien być naprawdę korzystania !important flagi czy można na to poradzić. Nadrzędna reguła musi być bardziej szczegółowa niż oryginalna reguła.

Myślę, że musisz przeczytać na specificity and inheritance.

Answer 3

style inline nadpisać style CSS, więc

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

zastępuje reguły w arkuszu stylów. Jednak nie jest to dobre rozwiązanie, aby rozwiązać ten problem. Preferowanym rozwiązaniem byłoby użycie selektora o wyższej specyficzności w twoim zewnętrznym css.

Answer 4

nie mogłem znaleźć żadnego lepszą odpowiedź niż po prostu użyć 0, aby przesłonić min rzeczy i używać coś jak 1000% zastąpić max rzeczy.