使い方！ CSSの優先順位を変更することが重要です-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

使い方！ CSSの優先順位を変更することが重要です

不言

Nov 20, 2018 pm 05:23 PM

各スタイルシートの優先度は前のページに記載されています。同じスタイルシート内の同じ要素の属性に複数の値が設定されている場合はどうなりますか?この記事ではその使い方を紹介します！ 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 要素内のテキストの色は赤になります。

使い方！ CSSの優先順位を変更することが重要です

見てみましょう! importantの使い方

コード中で優先度を変更したい場合は、! importantを使用する必要があります。使用方法は以下の通りです。

选择器{ 
  property（属性）：value（值） ！Important ; 
  }

ログイン後にコピー

スタイルを記述する際、値の後ろにスペースを入れて!重要と記述すると、通常の優先度に関係なく、そのスタイルが先に適用されます。

具体的な例を見てみましょう。上記のコードの CSS を次のように変更します。

<style type="text/css">
strong { 
  color:#00ff00 !important; 
} 

strong { 
  color:#ff0000; 
} 
</style>

ログイン後にコピー

ブラウザには次のように表示されます。strong 要素のフォントの色が変わります。が緑色になると、!重要はスタイルの優先順位を変更します。

使い方！ CSSの優先順位を変更することが重要です

スタイルシートが異なる場合に何が起こるかを見てみましょう。重要な使用方法

スタイルシートの優先順位は次のとおりです

(優先度高)
スタイルシートは HTML ドキュメント内に記述されます
ユーザースタイルシートはユーザーによって表示されます。
スタイルテーブル各ブラウザのデフォルトのスタイルテーブル (優先度が低い)

を設定すると、スタイルシートフォームが有効になります。

では、ユーザースタイルシートの設定に「!重要」を追加するとどうなるでしょうか?この場合、「!重要」の付いたスタイルが優先されます。詳しく見てみましょう。

(高優先度)
はい!重要なユーザーのスタイルシート
が利用可能です! HTMLドキュメントで書かれた重要なスタイルシート
スタイルシートHTMLドキュメントに記述されたスタイルシートユーザースタイルシート
デフォルトスタイルシート
"ユーザースタイルシート付き！重要な HTML ドキュメントによる。したがって、HTML 文書の作成者がスタイルを「!重要」に設定した場合でも、ユーザースタイルシートで新しいスタイル値テーブルを「!重要」に設定すると、ユーザースタイルシートが有効になります。

以上が使い方！ CSSの優先順位を変更することが重要ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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