CSSセレクターとは何ですか?基本的なCSSセレクターまとめ（9種類）

CSSセレクターとは何ですか? css セレクターは、CSS が作用するタグを指定し、そのタグの名前がセレクターです。意味: どのコンテナを選択するか。 HTML ページの要素は CSS セレクターを通じて制御されます。では、CSSセレクターとは何でしょうか? CSS で一般的に使用されるセレクターを見てみましょう

1: CSS ワイルドカード セレクター

ワイルドカード セレクターはアスタリスク (*) で表されます。例:

*{
    font-size : 12px;
}

は、すべての要素のフォント サイズが 12 ピクセルであることを意味します;

2: css グループセレクター

複数の要素が同じスタイル属性を持つ場合、それらは一緒にステートメントを呼び出すことができ、要素はカンマで区切られます。例:

p, li {

line-height:20px;

color:#c00;

}

#main p, #sider span {

color:#000;

line-height:26px;

}

グループ セレクターを使用すると、CSS コードが大幅に簡素化され、複数の同じ属性を持つ要素を結合してグループ化し、同じ CSS 属性を定義できるため、コーディング効率が大幅に向上し、時間も短縮されます。 CSS ファイルのサイズは必須です。

3: CSS タグ セレクター

完全な HTML ページは多くの異なるタグで構成されており、タグ セレクターはどのタグが対応する CSS スタイルを使用するかを決定します。例:

p{ 
    color: red; 
}

このコードは、すべての p タグを赤色にします。

4: CSS クラス セレクター

クラス セレクターは、クラス属性で指定されたクラス名を持つ任意の要素を対象とします。 例:

.info { 
    color:black; 
}

これにより、次のようになります。クラス名情報を持つすべての要素を black

5:css ID セレクター

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。セレクターは「#」記号で始まります。例:

#demop{

    color:#000;

}

これは、フォントの色を黒に設定するデモップの ID を持つ要素を表します。

6: css疑似クラスセレクター

マウスホバーなど、ドキュメント以外の他の条件を使用して要素のスタイルを適用する必要がある場合があります。現時点では、疑似クラスを使用する必要があります。以下は、リンクされたアプリケーションの疑似クラス定義です。例:

a:link{
    color:green ;
    font-size: 50px
}

a:hover{
    color:pink;
    font-size: 50px
}

a:active{
    color:yellow;
    font-size: 50px
}

a:visited{
    color:red;
    font-size: 50px
}

効果:
Web ページを開くとラベルが緑色になります
ラベルの上にマウスを置くとラベルがピンクになります
クリックするとラベルが黄色になります
クリックするとラベルが赤色になります

7: CSS 子孫セレクター

子孫セレクターは、特定の要素または要素グループの子孫を選択するために使用され、親要素の選択は前に配置され、子要素の選択は後ろに分離されて配置されます。真ん中のスペースで。子孫セレクターには 2 つ以上の要素が存在する場合があります。たとえば、ID が a、b、c の 3 つの要素がある場合、それらを区切るために複数のスペースが存在することがあります。 selector は、先祖要素の選択が子孫要素の前後でスペースで区切られている限り、#a #b #c{} の形式で記述できます。例:

#people em{ 
    color: red; 
}

このルールは、ID 値「people」を持つ要素に含まれる em 要素の色を赤に設定します。

8 info クラスに属する他の段落は無視されます。

9: css 属性セレクター

形式: 基本セレクター [attribute = 'attribute value']{ }、属性を書き込むこともできます。例:

p.info { 
    color:blue; 
}

実行結果:

css セレクター 優先順位サイズ:

!重要 > ID セレクター > ブラウザーのデフォルト属性
次に、重みを使用して

css セレクターの重み計算を計算する必要があります:

!重要 1000

ID Selector10010タグセレクターワイルドカードセレクター0

	Class |属性|疑似クラスセレクター
1
各行のすべてのセレクターをこれらの値に変換し、合計します。結果が大きいほど優先度が高くなります。 おすすめ関連記事: cssクラスセレクターとIDセレクター CSSセレクターの構成 おすすめの関連コース: Css3 基本ビデオチュートリアル

以上がCSSセレクターとは何ですか?基本的なCSSセレクターまとめ（9種類）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。