CSSのセレクターとは何ですか?セレクタの優先順位をご存知ですか？

フロントエンド エンジニアであれば、CSS セレクターに精通しているわけではありません。セレクターはレイアウトの重要な部分です。では、CSS の セレクターとは何かご存知ですか? CSSセレクターの優先順位は何ですか?秘密を知って初めて、仕事をより快適に行うことができます。次に、CSS セレクターとその優先順位について説明します。

1. CSS セレクターとは CSS には、ID セレクター、クラス セレクター、ワイルドカード セレクター、疑似クラス セレクターなど、さまざまなセレクターがあります。次に、よく使用されるものを中心に紹介します。

1. タグセレクター

構文: タグ名 {}、例: h1{} //すべての h1 要素のスタイルを設定します。

2. ID セレクター

構文: #id name{} //id 値は一意である必要があり、繰り返すことはできません。例: #top{} //top の id を持つ要素のスタイルを設定します。

3. クラスセレクター

構文: .class{}、例: .box{} //クラス値が box であるすべての要素のスタイルを設定します。

4. グループセレクター

構文: セレクター 1、セレクター 2、セレクター N{}、例: #box1,.box2,p{} //ID が box1、クラス box2、p の要素の場合、スタイルをまとめます。

5. ワイルドカードセレクター

構文: *{}、例: *{font-size: 16px} //ページ全体のフォントサイズを 16px に設定します。

6. 子孫セレクター

構文: セレクター 1 セレクター 2{}、例: p .aa{} //指定された祖先要素 p の指定された子孫 .aa を選択します。

7. 子要素セレクター

構文: 親要素>子要素{}、例: p>.box{} //親要素 p の指定された子要素 .box を選択します。子孫要素セレクターとの違いに注意してください

8. 疑似クラス セレクター

疑似クラスは、次のような特別な状態を表すために使用できます:

: link - 未訪問のハイパーリンク。

: 訪問済み - 訪問済みのハイパーリンク。

: hover - マウスが通過する要素。
: アクティブ - クリックされている要素。

例: a:hover{color:red} //マウスが a ラベルを通過すると、色が赤に変わります。

2. CSSセレクターの優先順位

同じ属性の異なる値が同じ要素に適用される場合、定義された属性間に矛盾がある場合、この時点でどちらの値を使用するかが関係しますCSS を優先する時期が来ました。 1. 属性の後に ! important を使用すると、ページ内の任意の場所で定義された要素のスタイルがオーバーライドされます。

2. 要素内に style 属性として記述される内部スタイル

3. ID セレクター
5. タグ セレクター
7. ブラウザーのカスタマイズまたは継承


; 内部スタイル > ID セレクター > タグ セレクター > ブラウザのデフォルト プロパティ

概要: 上記は、一般的に使用される CSS プロパティ セレクターとその構文ルールをまとめたものです。セレクターの優先順位については、ここでは最終的な結論のみを示します。ここでは実際に試してみる必要があります。このチュートリアルがお役に立てば幸いです。

以上がCSSのセレクターとは何ですか?セレクタの優先順位をご存知ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。