CSS では、重要は「重要」または「権限のある」を意味し、指定された CSS スタイル ルールの適用優先度を高めるために使用されます。これは、CSS スタイル値の末尾に追加されて、スタイルに重みを与えます。 、構文「selector{style:value! important;}」。重要なルールを使用してもパフォーマンスに悪影響はありませんが、保守性の観点から、絶対に必要な場合を除き、重要なルールの使用はできる限り避け、特別な状況でのみ使用する必要があります。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS では、重要とは「重要な」または「権威のある」という意味です。
important は、指定された CSS スタイル ルールのアプリケーションの優先順位を高めるために使用される CSS ルールです。CSS 値の末尾に追加されて、より重み付けされます。
構文:
选择器{样式:值!important;}important は、スタイルの重みを増やす方法を開発者に提供します。 ! important は、このスタイルの属性と属性値を含むスタイル全体の宣言であることに注意してください。
CSS では、スタイル ルールはカスケード方式で要素に適用されます。次のリストの重みが大きいほど、重みは小さくなります。
ブラウザ スタイル: これは、Web ブラウザによって宣言されるデフォルトのスタイルです。
ユーザー宣言スタイル: ユーザーがブラウザー オプションを使用して設定したカスタム スタイル、または開発者デバッグ ツールを通じて変更されたカスタム スタイルです。
開発時に宣言されたスタイル: Web サイト開発者によって CSS スタイル シートで宣言されたスタイルです。
!重要なルールを含む開発者が宣言したスタイル。
!重要なルールを含むユーザー スタイル。
! important の機能は、指定されたスタイル属性の優先順位を高めることです。
一般に、同じ要素に style 属性を設定する場合、次のように同じ属性に 2 つ以上の値を設定します。
p { /* 例1 */
color:red;
color:yellow;
color:blue;
}これは後続のステートメントです。プロパティが有効になり、フォントが青色で表示されます。
上記のように記述したいが、最終的に有効なフォントを赤で表示したいとします。その場合は、赤を設定できます!重要:
p { /* 例2 */
color:red !important; /* 设置了优先级 */
color:yellow;
color:blue;
}このときフォントは赤色で表示されます。
次のように、!payment で複数のスタイル属性が設定されている場合:
p { /* 例3 */
color:green !important;
color:red !important;
color:yellow !important;
color:blue;
}設定されていない場合と同じになります。 、最後に宣言された色が有効になります。つまり、上記の例の最終的な有効な色は黄色です。
<head>
<style>
p.p1 { color:blue; }
p { color:red; }
</style>
</head>
<body>
<p class="p1">p标签</p>
</body>要素が表示されます。青色の。
<head>
<style>
p.p1 { color:blue; }
p { color:red !important; } /* 设置了优先级 */
</style>
</head>
<body>
<p class="p1">p标签</p>
</body>要素は赤色で表示されます。
要素にインライン スタイル セットがある場合はどうなるでしょうか?
<head>
<style>
p { color:red !important; }
</style>
</head>
<body>
<p class="p1" style="color:blue">p标签</p>
</body>要素が赤色で表示されます。つまり、! important と宣言された style 属性は、他の宣言をオーバーライドします。
#!重要なルールをいつ使用するか? 絶対に必要な場合を除き、!重要なルールを使用しないでください。!重要なルールを使用すると、スタイル シートの自然なカスケード効果が損なわれ、コードの保守が困難になります。ただし、使用しなければならない状況もあります。 important:
1. Web サイトをテストおよびデバッグする場合、! important ルールは非常に役立ちます。 コードに CSS の問題があり、特定のスタイルが適用されていることを確認したい場合は、! important ルールを使用して、より良い方法が見つかるまでサイトの問題を一時的に修正できます (これは可能性があります)。しばらく時間がかかる）。
2. 出力スタイル シート!重要なルールを出力スタイル シートにも使用して、他のものによって上書きされることなくスタイルが適用されるようにすることもできます。
結論! important の使用はパフォーマンスに悪影響を及ぼしません。しかし、保守性の観点から、絶対に必要な場合を除き、 ! important の使用はできる限り避けるべきです。ルールとしては、特別な状況でのみ使用する必要があります。 Internet Explorer の
!重要 但在IE 6及更早的版本中，不支持我们这种写法。像例3，在IE5（我用的是IE11然后再控制台中切换到IE5的方式模拟的，IE11没有模拟IE6，凑合凑合_(:з」∠)_）中运行效果是这样的： 没错，最终它还是显示为蓝色，!important被忽略了。让我们换一种写法： 这个时候就可以显示为红色了： 再看看这个例子： 在模拟IE5的浏览器中运行效果如下： 个人理解：IE6及更早版本的IE浏览器中运行!important就好比说"大家都是针对这个元素设置的样式，color样式请优先使用我这个CSSRule对象（被{}包裹起来的一些样式属性）中的color样式"，而不是说"就使用我指定的color样式"。 （学习视频分享：web前端入门） 以上がCSS で重要 とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
p { color:blue; }
p { color:yellow; }
p { color:red !important; }/* 设置了优先级 */ログイン後にコピー
p { color:blue; }
p {
color:red !important; /* 设置了优先级 */
color:yellow;
}ログイン後にコピー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
