ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSスタイルシートにはどのような種類があるのでしょうか？セレクターの優先順位とは何ですか?
CSSスタイルシートにはどのような種類があるのでしょうか？セレクターの優先順位とは何ですか?
- 青灯夜游オリジナル
- 2021-07-27 16:26:274163ブラウズ
CSS スタイル シートには、インライン スタイル シート、内部スタイル シート、外部スタイル シートの 3 種類があります。セレクターの優先順位は、「ユニバーサル セレクター > 要素セレクター > クラス セレクター > 属性セレクター > 擬似クラス > ID セレクター > インライン スタイル」です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS スタイル シートにはどのような種類がありますか?
CSS スタイルが記述される位置 (または導入方法) に応じて、CSS スタイル シートは次の 3 つのカテゴリに分類できます。
1. インライン スタイル シート
インライン スタイルは、コード行内のタグに CSS スタイルを直接配置するもので、通常はタグの style 属性に配置されます。タグに直接挿入するのが最も直接的な方法ですが、変更するのが最も不便なスタイルでもあります。
例:
<p style="background-color: #999900">行内元素，控制段落-1</p>
2. 内部スタイル シート
内部スタイル シートは、c9ccee2e6ea535a969eb3f532ad9fe89 タグに含まれています。 6c1d9d1c5e7690ed0ad94b24a12b6eb7 タグは内部スタイル シートを表します。
Web ドキュメントに複数の c9ccee2e6ea535a969eb3f532ad9fe89 タグが含まれている場合は、そのドキュメントに複数の内部スタイル シートが含まれていることを意味します。
例:
<style>
div {
color: blue;
font-size: 16px;
}
</style>3. 外部スタイル シート
CSS スタイルが Web ページ ドキュメントの外部のファイルに配置されている場合、それは次のように呼ばれます。外部スタイル テーブル、CSS スタイル シート ドキュメントは外部スタイル シートを表します。
実際、外部スタイル シートは拡張子 .css を持つテキスト ファイルです。 CSS スタイル コードをテキスト ファイルにコピーし、.css ファイルとして保存すると、それは外部スタイル シートになります。
HTML ページでは、9b3737d50531bee70b4389e7b6fabf02 タグを使用してファイルを導入します。具体的な導入コードは次のとおりです:
<link rel="styleheet" href="css文件路径">
複数のスタイル シートの優先順位:
インラインスタイル インラインスタイル > 内部スタイルシート > 外部スタイルシート 外部スタイルシート > ブラウザデフォルトスタイル
以下はセレクタの優先度の説明と重みの説明です, そこで初心者向けチュートリアルから抜粋しました
優先度はブラウザによって決定され、どの属性値が要素に最も関連しているかを判断することによって要素に適用されます。優先度は、セレクターから構成されるマッチング ルールによってのみ決定されます。
優先度は、指定された CSS 宣言に割り当てられる重みであり、一致するセレクター内の各セレクター タイプの値によって決まります。
セレクターの優先順位は何ですか?
以下は、優先度の高いセレクターのリストです:
- ユニバーサル セレクター (*)
- 要素 (タイプ) セレクター
- クラスセレクター
- 属性セレクター
- 疑似クラス
- IDセレクター
- インラインスタイル
!重要なルール例外
!重要なルールがスタイル宣言に適用される場合、スタイル宣言は、宣言リスト内のどこにあるかに関係なく、CSS 内の他の宣言をオーバーライドします。ただし、!重要なルールは優先順位とは関係ありません。 ! important を使用すると、スタイルシートの元のカスケード ルールが変更され、デバッグが困難になるため、推奨されません。
いくつかの経験則:
- ##常に 最適化するには、!重要
# ではなく、スタイル ルールの優先順位を使用して問題を解決することを検討してください。##Only - サイト全体または外部 CSS (参照される ExtJ や YUI など) をカバーする必要がある特定のページでのみ使用します !重要
## Never サイト全体の CSS では - を決して使用しないでください。! important
Never プラグインでは - ! important ## を決して使用しないでください
#重み計算:
- 3. クラス セレクターの重みは 10
- 4. HTML タグ セレクターの重みは 1
- セレクターの重みを使用して計算および比較します。em は青色で表示されます。例は次のとおりです: https://c.runoob.com/codedemo/3048
-
CSS 優先順位ルール:
- A 各セレクターには重みがあり、重みが大きいほど優先されます;
- B 重みが等しい場合、後で表示されるスタイル シート設定は、最初に表示されるスタイル シート設定よりも優先される必要があります。
- C 作成者のルールは、閲覧者のルールよりも優先されます。つまり、Web ページ作成者によって設定された CSS スタイルは、Web ページ作成者によって設定されたスタイルよりも優先されます。ブラウザ;
- D 継承された CSS スタイルは、後で指定された CSS スタイルほど優れていません;
- E 「!重要」でマークされたルールは、同じプロパティ セット内で最も高い優先度を持ちます設定; 例は次のとおりです: https://c.runoob. com/codedemo/3049
結果: Firefox では青で表示; IE 6 では赤で表示;
ここにあります一般的な CSS 重み関係図:
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSスタイルシートにはどのような種類があるのでしょうか？セレクターの優先順位とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。