CSS コードで基本的なセレクターを学ぶ: セレクターの分類と応用をゼロから学ぶためのクイック スタート

クイック スタート CSS コード基本セレクター: セレクターの分類と応用をゼロから学ぶ

CSS (Cascading Style Sheets) は、HTML ドキュメントのスタイルを制御するために使用されます。マークアップ言語。 CSS では、スタイルを適用する HTML 要素を選択するためにセレクターが使用されます。簡単に言えば、セレクターは、CSS スタイルの影響を受ける HTML 要素を指定するために使用されます。

セレクターには多くの種類があり、ニーズやアプリケーション シナリオに応じて適切なセレクターを選択できます。この記事では、読者がすぐに CSS コードを使い始めることができるように、CSS セレクターの基本的な分類と応用をゼロから紹介します。

1. 要素セレクター

要素セレクターは、HTML 要素のタグ名を通じて対応する要素を選択する、最も単純かつ基本的なセレクターです。たとえば、すべての段落要素を選択するには、次のセレクターを使用できます。上記のコードの

p {
    color: red;
}

p は要素セレクターであり、すべての <p></p> <ol start="2">クラス セレクター<li> </ol>クラス セレクターは、HTML 要素の <p>class<code> 属性に名前を指定することによって要素を選択します。このセレクターを使用すると、同じクラス名の要素を選択し、それらに同じスタイルを適用できます。たとえば、クラス名 highlight を持つすべての要素を選択するには、次のセレクターを使用できます。上記のコードの

.highlight {
    background-color: yellow;
}

.highlight はクラス セレクターです。これにより、クラス名 highlight を持つすべての要素が選択され、背景色が黄色に設定されます。

ID セレクター

ID セレクターは、HTML 要素の

id 属性に一意の名前を指定することで要素を選択します。クラス セレクターとは異なり、ID 属性の値は HTML ドキュメント内で一意である必要があるため、ID セレクターは 1 つの要素のみを選択できます。たとえば、ID header を持つ要素を選択するには、次のセレクターを使用できます。 上記のコードの

#header {
    font-size: 24px;
}

#header は ID セレクターです。 selects ID header を持つ要素を削除し、フォント サイズを 24 ピクセルに設定します。

子孫セレクター

子孫セレクターは、HTML 要素の子孫要素を選択することによって要素を選択します。子孫要素とは、選択した要素の子要素、孫要素、曾孫要素などを指します。たとえば、すべての

要素の下にある

要素を選択するには、上記のコードでセレクター

div p {
    font-weight: bold;
}

## を使用できます。 #div p

は、すべての <div> 要素の下にあるすべての <code><p></p> 要素を選択し、そのフォントを太字に設定する子孫セレクターです。 直接子要素セレクター

5. 直接子要素セレクターは、HTML 要素の直接の子要素を選択することによって要素を選択します。直接の子要素は、その子孫ではなく、選択した要素の直接の子要素を参照します。たとえば、

の直接の子であるすべての <div> 要素を選択するには、次のセレクターを使用できます。上記のコード ##div > p<code> は直接の子要素セレクターであり、

要素のすべての直接の子要素 ​​

を選択して追加します。文字色は青色に設定されています。 上記の 5 つの基本セレクターに加えて、要素の選択に使用できる疑似クラス セレクターや属性セレクターなど、さらに多くの種類のセレクターがあります。これらのセレクターの分類と適用を理解して習得することは、HTML 要素のスタイルをより適切に制御するのに役立ちます。 要約すると、CSS セレクターを学習して適用することで、HTML 要素のスタイルを柔軟に制御および管理し、Web ページのさまざまなレイアウトやデザインを実現できます。この記事が、読者が CSS コードをすぐに始めて、Web デザインと開発能力を向上させるのに役立つことを願っています。