クイック スタート CSS コード基本セレクター: セレクターの分類と応用をゼロから学ぶ
CSS (Cascading Style Sheets) は、HTML ドキュメントのスタイルを制御するために使用されます。マークアップ言語。 CSS では、スタイルを適用する HTML 要素を選択するためにセレクターが使用されます。簡単に言えば、セレクターは、CSS スタイルの影響を受ける HTML 要素を指定するために使用されます。
セレクターには多くの種類があり、ニーズやアプリケーション シナリオに応じて適切なセレクターを選択できます。この記事では、読者がすぐに CSS コードを使い始めることができるように、CSS セレクターの基本的な分類と応用をゼロから紹介します。
要素セレクターは、HTML 要素のタグ名を通じて対応する要素を選択する、最も単純かつ基本的なセレクターです。たとえば、すべての段落要素を選択するには、次のセレクターを使用できます。上記のコードの
p { color: red; }
p
は要素セレクターであり、すべての <p> ;# を選択します。 ## 要素にタグを付け、そのテキストの色を赤に設定します。
class 属性に名前を指定することによって要素を選択します。このセレクターを使用すると、同じクラス名の要素を選択し、それらに同じスタイルを適用できます。たとえば、クラス名
highlight を持つすべての要素を選択するには、次のセレクターを使用できます。上記のコードの
.highlight { background-color: yellow; }
.highlight はクラス セレクターです。これにより、クラス名
highlight を持つすべての要素が選択され、背景色が黄色に設定されます。
id 属性に一意の名前を指定することで要素を選択します。クラス セレクターとは異なり、ID 属性の値は HTML ドキュメント内で一意である必要があるため、ID セレクターは 1 つの要素のみを選択できます。たとえば、ID
header を持つ要素を選択するには、次のセレクターを使用できます。 上記のコードの
#header { font-size: 24px; }
#header は ID セレクターです。 selects ID
header を持つ要素を削除し、フォント サイズを 24 ピクセルに設定します。
要素の下にある
要素を選択するには、上記のコードでセレクター
div p { font-weight: bold; }
は、すべての <div> 要素の下にあるすべての <code><p></p>
要素を選択し、そのフォントを太字に設定する子孫セレクターです。 直接子要素セレクター
の直接の子であるすべての <div> 要素を選択するには、次のセレクターを使用できます。上記のコード ##div > p<code> は直接の子要素セレクターであり、
を選択して追加します。文字色は青色に設定されています。
上記の 5 つの基本セレクターに加えて、要素の選択に使用できる疑似クラス セレクターや属性セレクターなど、さらに多くの種類のセレクターがあります。これらのセレクターの分類と適用を理解して習得することは、HTML 要素のスタイルをより適切に制御するのに役立ちます。
要約すると、CSS セレクターを学習して適用することで、HTML 要素のスタイルを柔軟に制御および管理し、Web ページのさまざまなレイアウトやデザインを実現できます。この記事が、読者が CSS コードをすぐに始めて、Web デザインと開発能力を向上させるのに役立つことを願っています。
以上が基本的な CSS コード セレクターを学習します。ゼロから始めて、セレクターの分類と適用に慣れます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。