さまざまな種類の CSS3 セレクター

CSS3 セレクターにはさまざまなタイプがあり、さまざまな要素属性、構造的関係、または状態に基づいて要素を選択できます。以下では、一般的に使用される CSS3 セレクターの種類をいくつか紹介し、具体的なコード例を示します。

1. 基本セレクター:

• #要素セレクター: p 要素を例として、要素名をセレクターとして使用します:

  p {
    color: red;
  }

• クラス セレクター: . で始まるクラス名をセレクターとして使用します。ここでは例としてクラスを持つ要素を取り上げます:

  .example {
    font-size: 16px;
  }

• # #ID セレクター : # で始まる ID をセレクターとして使用します。ここでは、ID がタイトルである要素を例として取り上げます:

  #title {
    font-weight: bold;
  }

##属性セレクター:

[attr]: 指定された属性を持つ要素を選択します。ここでは例としてデータ属性を持つ要素を取り上げます:

• [data] {
    background-color: yellow;
  }

[attr=value]:指定された属性を持つ要素を選択します。 および value 要素、ここでは例として data 属性値を持つ要素を取り上げます:

• [data="example"] {
    color: blue;
  }

[attr^=value]: 属性を持つ要素を選択します例として、データ属性値が「test」で始まる要素を取り上げます。

• [data^="test"] {
    text-decoration: underline;
  }

構造セレクター:

:nth-child(n): 親要素の n 番目の子要素を選択します。ここでは、親要素の 3 番目の子要素を例として取り上げます:

• .parent :nth-child(3) {
    background-color: green;
  }

:first-child: 親要素を選択します。 親要素の最初の子要素。例として、親要素の最初の子要素を示します。

• .parent :first-child {
    font-style: italic;
  }

疑似クラスセレクター:

:hover: マウスが要素上にあるときの状態を選択します。以下は、要素上にマウスを置いたときに背景色を変更する例です。要素がホバーされている:

• .example:hover {
    background-color: orange;
  }

:active: アクティブ化する要素を選択します。要素がクリックされたときにテキストの色を変更する例を次に示します:

• .example:active {
    color: purple;
  }

  #上記は、CSS3 セレクターのいくつかのタイプとコード例です。これは、開発者がページ上の要素のスタイルをより柔軟に選択および制御するのに役立ちます。これらのセレクターをマスターすることで、ページ開発の効率とユーザー エクスペリエンスを効果的に向上させることができます。

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