CSSでの!重要な使い方のまとめ-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSでの!重要な使い方のまとめ

黄舟

Jul 27, 2017 am 11:30 AM

以下は、CSS の最も重要な !重要な属性の 1 つについて、著者の実践から要約したものです:

1. IE が特定の CSS 仕様から逸脱する状況を解決するために使用されます。例 IE の効果は、Firefox、Opera などの他のブラウザとは常に 2 ピクセル異なり、ページレイアウトがずれます。これは、IE のボックス間の距離の解釈のバグが原因です。問題を解決するには、! important を使用してください。

たとえば、次のスタイル

.myclass{
 margin-left:20px!important;
 margin-left:40px;

}

Firefox、Opera、および Chrome の場合、これらのブラウザは ! important 属性をサポートします。これは、デフォルトで margin-left:20px! important ステートメントが有効になることを意味します。 ! important で宣言されたスタイルはそれをオーバーライドしません。つまり、これが最高レベルであり、それ以下の誰も私に代わることはできません。

しかし、IE ブラウザに切り替えるとどうなるでしょうか? IE は ! important をサポートしていないため、IE はこの文の意味を知らないので、愚かな IE はこれをスキップし、次の記事を知っていたのでマージンしました。 -left:40px;

が有効になりました。

これに関して、1 つ注意する必要があります。

は、IE が実際に ! important を認識しないという意味ではありません。IE を他のブラウザと区別するためにのみ ! important を使用したい場合は、次のように間違っています。

.myclass{
backgroud-color:black !important;
}

us 私は気まぐれに、このスタイルは IE では認識されないが、他のブラウザで表示できるようにカスタマイズできるのではないかと思いました。本当にそうですか？本当にありません！ IEでも認識しました。

この時点で少し混乱していますか? IE はそれを認識していますか? ? ?

答えは非常に簡単です。これは、次のように、同じ名前の 2 つのスタイルが同時に表示される場合にのみ使用できます。

.myclass{
 margin-left:20px!important;
 margin-left:40px;

}

2. font-size などのスタイル A が定義されている場合、将来的には、このフォントサイズを上書きするスタイル A も使用されます。また、新しいスタイルでも ! important が使用される場合は、強制的に上書きされます

.A{
 font-size:12px !important;
}
.A{
 font-size:14px;   //不会生效
}

.A{
 font-size:14px !important; //生效
}

。

同じ名前のスタイルである必要があることに注意してください。つまり、スタイル名は、親と子の状況の場合は機能しません。たとえば、

<html>
<head>
<style>
.father{
font-size:12px !important;
}
.child{
font-size:14px;
}
</style>
<body>
<div class="father">
 <div class="child">I am child </div>
</div>
</body>
</html>

です。この場合、子のフォントサイズは 14 ピクセルであり、父親の影響を受けません。

以上がCSSでの!重要な使い方のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。