一般的な CSS3 セレクターは何ですか?

CSS3 は Web デザインに使用されるスタイル シート言語で、スタイルを設定する HTML 要素をより正確に指定するのに役立つ豊富なセレクターを備えています。以下では、一般的に使用される CSS3 セレクターをいくつか紹介し、対応するコード例を示します。

1. 要素セレクター (要素セレクター)
   要素セレクターは、スタイル設定のために HTML ドキュメント内の特定の要素を選択できる最も基本的なセレクターです。たとえば、すべての段落要素 (

   ) のテキストの色を赤に設定するには、次のコードを使用できます。

p {
    color: red;
}

2. クラス セレクター
   クラス セレクターは次のとおりです。同じクラス名の要素を選択するために使用されます。要素にクラス属性を追加すると、要素を対応するスタイル ルールに関連付けることができます。たとえば、クラス「class1」のすべての要素の背景色を黄色に設定するには、次のコードを使用できます。

.class1 {
    background-color: yellow;
}

3. ID セレクター
   ID セレクター クラス セレクターと同様、指定された要素を選択するために使用されます。違いは、ID セレクターが一意の ID を持つ要素を選択することです。要素に id 属性を追加すると、要素を対応するスタイル ルールに関連付けることができます。たとえば、「id1」の要素のフォント サイズを 20 ピクセルに設定するには、次のコードを使用します。

#id1 {
    font-size: 20px;
}

4. 擬似クラス セレクター
   擬似クラス セレクターを有効にします。要素の状態や位置に基づいて要素を選択することで、要素のさまざまなスタイルを設定できます。一般的に使用される疑似クラス セレクターには、:hover、:visited、:first-child などが含まれます。たとえば、すべてのリンクの上にマウスを置いたときにリンク テキストが赤になるようにするには、次のコードを使用できます。

a:hover {
    color: red;
}

5. Attribute Selector
   Attribute Selector 要素を選択できます。属性に基づいてスタイルを設定します。たとえば、「title」属性を持つすべての画像の境界線の色を緑に設定するには、次のコードを使用できます。

img[title] {
    border: 1px solid green;
}

6. Child Selector
   Child Selector を使用できます。要素の直接の子要素を選択します。たとえば、リスト (
   ) 内の直接の子 (
   • ) をすべて選択し、背景色を青に設定するには、次のコードを使用します。

ul > li {
    background-color: blue;
}

7. 否定セレクター (否定セレクター)
   否定セレクターは、スタイル設定の要素のセットから指定された要素を削除できます。たとえば、クラス「class1」のすべての要素を除く要素を選択し、そのテキストの色をグレーに設定するには、次のコードを使用できます。

:not(.class1) {
    color: gray;
}

上記では、いくつかの一般的な CSS3 選択を紹介しています。 HTML 要素をより正確に選択してスタイル設定するのに役立ちます。これらのセレクターを柔軟に適用することで、Web デザインでさまざまな効果を簡単に実現できます。

以上が一般的な CSS3 セレクターは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。