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

CSS (Cascading Style Sheets) は、Web デザインに使用されるスタイル シート言語です。 Web ページの形式をより美しく、標準化することができます。セレクターは CSS の非常に重要な概念であり、Web ページ内の要素を選択するために使用できます。この記事では、読者が CSS をよりよく学習して習得できるように、CSS セレクターの分類を紹介します。

1. 要素セレクター

要素セレクターは、Web ページ内の HTML 要素を選択できる最も基本的なセレクターです。要素セレクターの構文は、HTML 要素の名前です。たとえば、次の CSS コードを使用してすべての段落要素を選択できます:

p {
  color: red;
}

このコードは、すべての段落要素のテキストの色を赤に設定します。

2. クラス セレクター

クラス セレクターとは、属性は同じだが値が異なる Web ページ内の要素を分類し、それらに対して同じクラス名を選択し、このクラス名をターゲットにすることを指します。スタイリングのセレクターです。クラス セレクターの構文形式は、ピリオド (.) の後にクラス名が続きます。たとえば、次の CSS コードを使用して、「example」というクラス名を持つ要素を選択できます。

.example {
  color: blue;
}

このコードは、「example」というクラス名を持つすべての要素のテキストの色を青に設定します。

3. ID セレクター

ID セレクターは、Web ページ内の一意の要素を識別するために使用され、各要素は 1 つの ID のみを持つことができます。 ID セレクターの構文は、ポンド記号 (#) の後に ID 名が続きます。たとえば、次の CSS コードを使用して ID「header」を持つ要素を選択できます:

#header {
  font-size: 20px;
}

このコードは、ID「header」を持つ要素のフォント サイズを 20px に設定します。

4. 子孫セレクター

子孫セレクターは、Web ページ内の子孫要素を選択できます。子孫セレクターの構文では、親要素と子要素をスペースで区切ります。たとえば、次の CSS コードを使用して、すべての div 要素内の p 要素を選択できます。

div p {
  text-align: center;
}

このコードは、p 要素のテキストをすべての div 要素の下の中央に配置します。

5. 隣接兄弟セレクター

隣接兄弟セレクターは、条件を満たす 2 つの隣接する兄弟要素を選択できます。隣接兄弟セレクターの構文形式は、修飾された要素の後にプラス記号 ( ) と選択された要素を追加します。たとえば、次の CSS コードを使用して、div 要素に隣接する ul 要素を選択できます。

div + ul {
  list-style: none;
}

このコードは、div 要素に隣接する ul 要素のリスト スタイルを削除します。

6. サブ要素セレクター

サブ要素セレクターは、条件を満たすサブ要素を選択できます。子要素セレクターの構文形式は、修飾された要素の後に不等号 (>) と選択された子要素を追加することです。たとえば、次の CSS コードを使用して、div 要素の子要素である h1 要素を選択できます。

div > h1 {
  font-weight: bold;
}

このコードは、div 要素の子要素である h1 要素のフォントを作成します。大胆な。

要約すると、CSS セレクターには、要素セレクター、クラス セレクター、ID セレクター、子孫セレクター、隣接兄弟セレクター、子要素セレクターが含まれます。これらのセレクターを正しく使用すると、CSS スタイルをより詳細で柔軟にすることができます。これらのセレクターの使用法を学びマスターすることは、CSS エフェクトの効率と品質を向上させるのに役立ちます。

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