CSSにはどのようなセレクターがありますか?

<p>CSS は Web デザインに使用されるスタイル シート言語で、Web ページの外観とレイアウトを制御するために使用できます。セレクターは CSS の最も重要な部分の 1 つであり、スタイルを変更する HTML 要素を見つけるのに役立ちます。この記事では、CSSでよく使われるセレクターの種類について詳しく紹介します。

<p>1. 基本セレクター

1. タグ セレクター: HTML タグ名によって要素を選択します。

<p>例:

p {
  color: red;
}

<p>上記のコードは、HTML ドキュメント内のすべての <p> 要素のテキストの色を赤に変更します。

2. クラス セレクター: クラス属性を通じて 1 つ以上の要素を選択します。

<p>例:

.blue {
  color: blue;
}

<p>上記のコードは、クラス属性 "blue" を持つすべての要素のテキストの色を青に変更します。

3. ID セレクター: id 属性を通じて一意の要素を選択します。

<p>例:

#header {
  width: 100%;
}

<p>上記のコードは、id 属性 "header" を持つ要素の幅を 100% に調整します。

<p>2. 組み合わせセレクター

1. 子孫セレクター: 子孫要素を選択します。

<p>例:

header nav {
  background-color: blue;
}

<p>上記のコードは、<header>## の下にあるすべての

要素の背景を設定します。 #要素 色が青に変わります。

子要素セレクター: 子要素を選択します。

例: <p>

ul > li {
  font-size: 16px;
}

上記のコードは、すべての <p>

要素
• ## の直接の子要素を削除します。 #のフォントサイズは16ピクセルに設定されています。 3. 属性セレクター
  <p>
  属性セレクター: 属性名によって要素を選択します。
  1. 例:

  a[href="https://www.example.com"] {
    color: green;
  }

  <p>上記のコードは、
  https://www.example.com<p> にリンクするすべてのアンカー要素の色を緑色に設定します。
  既存のセレクター: この属性を含むすべての要素を選択します。
  2. 例:

  input[type="text"] {
    background-color: #f2f2f2;
  }

  <p>上記のコードは、type 属性が
  "text"## である <p> 要素をすべて削除します。 # 背景色はオフホワイトに設定されます。 4. 擬似クラスセレクター
  <p>リンク擬似クラス: リンクであるかどうかに基づいて要素を選択します。
  1. 例:

  a:hover {
    color: red;
  }

  上記のコードは、マウスオーバー時にすべてのリンクの色を赤に設定します。 <p>
  <p>フォーカス疑似クラス: ユーザーが要素にフォーカスを設定したかどうかに基づいて要素を選択します。
  2. 例:

  input:focus {
    border: 2px solid green;
  }

  上記のコードは、ユーザーがフォーカスを緑色に設定した場合に、<p>
  要素の境界線の色を設定します。 <p>5. 疑似要素セレクター
  <p>::before および ::after: 生成されたコンテンツを、選択した要素のコンテンツの前後に挿入します。
  1. 例:

  h1::before {
    content: ">> ";
  }

  上記のコードは、すべての <p>

  要素の前に 2 つの大なり記号を含むコンテンツを挿入します。 <p>::first-letter および ::first-line: 要素のテキストの最初の文字または最初の行を選択します。

  2. 例:

  p::first-letter {
    font-size: 20px;
  }

  上記のコードは、各 <p><p>

  要素の最初の文字のフォント サイズを 20 ピクセルに設定します。 <p>概要:

  上記は CSS で一般的に使用されるセレクター タイプであり、これを使用して Web ページでさまざまなスタイルをより適切に表示できます。実際の Web デザインでは、より良い結果を達成するために、実際の状況に応じて使用するさまざまなセレクターを選択できます。 <p>

  以上がCSSにはどのようなセレクターがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。