14

可能であればmin-height、特定のdivのクラスのプロパティをオーバーライドするにはどうすればよいですか？

例：

.someclass {
  min-height: 200px;
}
<div class="someclass">
  -- content --
</div>

divのようなものを使用してみstyle="min-height:100px!important;"ましたが、うまくいかないようです。

4

4 に答える 4

19

!important標準のスタイルシートで宣言を使用するのは非常に悪い習慣です。スタイルシートのカスケードの性質を壊すので、絶対に避けてください。

より具体的なセレクターを使用して、以前のスタイルをオーバーライドします。

スタイルをデフォルトにリセットするauto|inherit|0には、属性に応じてを使用します。それmin-heightは0です。CSS3は、inital使用することが望ましい特別な値を導入していますが、残念ながら、IEのサポートは制限されています。

あなたの場合min-height:100px;、より高い特異性（idまたはインラインスタイルのいずれか-できれば後者ではない）のセレクターでうまくいくはずです。 

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>

于 2012-06-26T09:20:59.740 に答える
6

最小のものをオーバーライドするために0を使用し、最大のものをオーバーライドするために1000％のようなものを使用するよりも良い答えを見つけることができませんでした。

于 2013-09-18T20:32:59.070 に答える
1

次の!importantように、フラグをセミコロンの内側に配置する必要があります。

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

!importantさらに、あなたがそれを助けることができるならば、あなたは実際に旗を使うべきではありません。オーバーライドするルールは、元のルールよりも具体的である必要があります。

特異性と継承について読む必要があると思います。

于 2012-06-26T09:15:05.887 に答える
0

インラインスタイルはCSSスタイルをオーバーライドするため、

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

スタイルシートのルールを上書きします。ただし、通常、この問題を解決するのは適切な解決策ではありません。推奨される解決策は、外部cssでより高い特異性を持つセレクターを使用することです。

于 2012-06-26T09:15:57.967 に答える