Wenn möglich, wie kann ich eine min-height Eigenschaft einer Klasse für ein bestimmtes div überschreiben?Min-height-Eigenschaft überschreiben
Beispiel:
.someclass {
min-height: 200px;
}<div class="someclass">
-- content --
</div>Ich habe versucht, so etwas wie style="min-height:100px!important;" auf dem div verwenden, aber das scheint nicht zu funktionieren.
Es ist sehr schlechte Angewohnheit, !important Deklarationen in Ihren Standard-Stylesheets zu verwenden. Vermeiden Sie es um jeden Preis, denn es bricht die Kaskadierung der Stylesheets.
Verwenden Sie eine more specific selector, um vorherige Stile zu überschreiben.
Um Stile auf den Standardwert zurückzusetzen, verwenden Sie je nach Attribut auto|inherit|0. Für min-height ist es 0. CSS3 führt den speziellen Wert inital ein, der vorzugsweise verwendet werden sollte - aber leider hat es IE support begrenzt.
In Ihrem Fall min-height:100px; in einem Selektor mit höherer Spezifität (entweder ID oder Inline-Stil - vorzugsweise nicht die letztere) sollte den Trick tun.
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>Ein !important Flagge muss innerhalb des Semikolon gehen, wie folgt aus:
.someclass {min-height: 200px !important;}
Darüber hinaus sollten Sie nicht wirklich !important Flags verwenden, wenn Sie es helfen kann. Eine übergeordnete Regel muss spezifischer als die ursprüngliche Regel sein.
Ich denke, dass Sie auf specificity and inheritance lesen müssen.
verwendet wichtig, diese Lösung zu verwerfen und ich muss die Eigenschaft von min-height überschreiben: 200px. Es benutzt bereits 200px, das hilft also nicht – nik
... also die 200 auf 100 ändern? –
.eine Klasse mit anderen Eigenschaften wird nicht nur für dieses div festgelegt. Deshalb müssen Sie es überschreiben :) – nik
Inline Arten CSS-Stile außer Kraft setzen, so
<div class="someclass" style="height: 50px;">...</div>
die Regel in Ihrem Stylesheet außer Kraft setzt. Es ist jedoch im Allgemeinen keine gute Lösung, um dieses Problem zu beheben. Die bevorzugte Lösung wäre, einen Selektor mit einer höheren Spezifität in Ihrer externen CSS zu verwenden.
Ich konnte keine bessere Antwort als finde nur 0 verwenden min Sachen außer Kraft zu setzen, und so etwas wie 1000% verwendet max Sachen außer Kraft zu setzen.
Yep! Dies ist die Standardmethode zum Zurücksetzen von "min- *" CSS-Eigenschaften. –
Dies ist die logische Antwort. Vielen Dank. –
müssen Mindesthöhe überschreiben: 200px. min-height: auto funktioniert auch nicht – nik
danke für deine lösung, ich war weg px nach 100px. das passiert irgendwann wenn Figur dynamisch kommt – nik
du bist willkommen;) – Christoph