ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSで強制的に優先度を上げる方法
CSSで強制的に優先度を上げる方法
- 青灯夜游オリジナル
- 2022-09-06 17:49:504610ブラウズ
CSS では、「! important」ステートメントを設定することで優先度を強制的に高めることができます。このステートメントは、指定された CSS スタイル ルールの適用優先度を高めるために使用され、CSS の最後に追加されます。スタイル値を指定します。スタイルにはより重みがあり、構文は「selector {property:value! important;}」です。 「! important」ルールを使用すると、スタイル シートの自然なカスケード効果が損なわれ、コードの保守が困難になります。そのため、絶対に必要な場合を除き、! important ルールの使用はできる限り避け、特別な状況でのみ使用する必要があります。 。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS では、「! important」ステートメントを設定することで優先度を強制的に高めることができます。
#!重要な宣言
#!重要は、指定された CSS スタイル ルールの適用優先度を高めるために使用されます。最後に CSS 値を追加して重みを付けます。选择器{属性:值 !important;}注: 属性: 値 !重要 属性値はスペースで区切ることができます。
#! important は、要素の style 属性に CSS 宣言を直接設定するよりも、スタイルの重みを増やす方法を開発者に提供します。これは通常、CSS が JavaScript 設定をオーバーライドする場合に使用されます。
例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试!Important</title>
</head>
<style type="text/css">
#Box div
{
color: red;
}
.important_false
{
color: blue;
}
.important_true
{
color: blue !important;
}
</style>
<body>
<div id="Box">
<div class="important_false">
这一行末使用important</div>
<div class="important_true">
这一行使用了important</div>
</div>
</body>
</html>レンダリング:
CSS コードの最初の行は、ボックス内のすべての div のフォントの色を赤に設定します。 , 2 行目と 3 行目は両方ともクラスを使用して、独自の div のフォントの色を青に再定義しています。
#!重要なルールをいつ使用するか?
絶対に必要な場合を除き、!重要なルールを使用しないでください。!重要なルールを使用すると、スタイル シートの自然なカスケード効果が損なわれ、コードの保守が困難になります。ただし、使用しなければならない状況もあります。 important: 1. Web サイト をテストおよびデバッグする場合、! important ルールは非常に役立ちます。
コードに CSS の問題があり、特定のスタイルが適用されていることを確認したい場合は、! important ルールを使用して、より良い方法が見つかるまでサイトの問題を一時的に修正できます (これは可能性があります)。しばらく時間がかかる）。
2. 出力スタイル シート
!重要なルールを出力スタイル シートにも使用して、他のものによって上書きされることなくスタイルが適用されるようにすることもできます。
結論
! important の使用はパフォーマンスに悪影響を及ぼしません。しかし、保守性の観点から、絶対に必要な場合を除き、 ! important の使用はできる限り避けるべきです。ルールとしては、特別な状況でのみ使用する必要があります。
以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！
特記事項:
!重要 は IE6 では認識されません。例: .testClass{
color:blue !important;
color:red;
} この書き方はIE6では認識できません。最終的には.testCalssが赤字で表示されますが、IE6でも認識できるように書き方を変更することも可能です!重要
.testClass{
color:blue !important;
}
.testClass{
color:red;
} (学習動画共有: Web フロント-開発を終了)
以上がCSSで強制的に優先度を上げる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。