ホームページ > 記事 > ウェブフロントエンド > 使い方！ CSSの優先順位を変更することが重要です
使い方！ CSSの優先順位を変更することが重要です
- 不言オリジナル
- 2018-11-20 17:23:234073ブラウズ
各スタイルシートの優先度は前のページに記載されています。同じスタイルシート内の同じ要素の属性に複数の値が設定されている場合はどうなりますか?この記事ではその使い方を紹介します！ CSS の優先順位を変更することが重要です。
簡単な例を見てみましょう。まず、ターゲット HTML ステートメントを作成します。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
strong {
color: #00ff00;
}
strong {
color: #ff0000;//red
}
</style>
</head>
<body>
<p>
啦啦啦啦<strong>php中文网</strong>
哒哒哒哒哒<strong>php</strong>中文网
</p>
</body>
</html>ブラウザへの影響は次のとおりです。strong 要素内のテキストの色は赤になります。
見てみましょう! importantの使い方
コード中で優先度を変更したい場合は、! importantを使用する必要があります。使用方法は以下の通りです。
选择器{
property（属性）：value（值） ！Important ;
}スタイルを記述する際、値の後ろにスペースを入れて!重要と記述すると、通常の優先度に関係なく、そのスタイルが先に適用されます。
具体的な例を見てみましょう。上記のコードの CSS を次のように変更します。
<style type="text/css">
strong {
color:#00ff00 !important;
}
strong {
color:#ff0000;
}
</style>ブラウザには次のように表示されます。strong 要素のフォントの色が変わります。が緑色になると、!重要はスタイルの優先順位を変更します。
スタイル シートが異なる場合に何が起こるかを見てみましょう。重要な使用方法
スタイルシートの優先順位は次のとおりです
(優先度高)
スタイルシートは HTML ドキュメント内に記述されます
ユーザー スタイルシートはユーザーによって表示されます。
スタイル テーブル 各ブラウザのデフォルトのスタイル テーブル (優先度が低い)
を設定すると、スタイル シート フォームが有効になります。
では、ユーザー スタイルシートの設定に「!重要」を追加するとどうなるでしょうか?この場合、「!重要」の付いたスタイルが優先されます。詳しく見てみましょう。
(高優先度)
はい!重要なユーザーのスタイルシート
が利用可能です! HTMLドキュメントで書かれた重要なスタイルシート
スタイルシートHTMLドキュメントに記述されたスタイルシートユーザースタイルシート
デフォルトスタイルシート
"ユーザースタイルシート付き！重要な HTML ドキュメントによる。したがって、HTML 文書の作成者がスタイルを「!重要」に設定した場合でも、ユーザー スタイルシートで新しいスタイル値テーブルを「!重要」に設定すると、ユーザー スタイルシートが有効になります。
以上が使い方！ CSSの優先順位を変更することが重要ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。