CSS でいくつかのセレクターを探索する

CSS は、Web サイトにスタイルとレイアウトを追加するために使用される言語です。 CSS では、セレクターを使用してスタイルを設定する HTML 要素を選択し、スタイルを適用できるようにします。セレクターは非常に柔軟で、タグ属性、クラス、ID、位置などに基づいて要素を選択できます。

この記事では、CSS のいくつかのセレクターとその使用法について説明します。

1. タグ セレクター

タグ セレクターは、CSS の最も基本的なセレクターの 1 つです。タグの種類によって要素を選択します。たとえば、すべての段落要素にスタイルを適用する場合は、次のコードを使用できます。

 p {
   color: red;
   font-size: 20px;
 }

このコードは、すべての段落要素のテキストの色を赤に変更し、フォント サイズを 20 ピクセルに設定します。

2. クラス セレクター

クラス セレクターは、CSS で最も一般的に使用されるセレクターの 1 つです。クラス名に基づいて要素を選択できます。たとえば、クラス名「header」を持つすべての要素にスタイルを適用する場合は、次のコードを使用できます。

 .header {
   background-color: blue;
   color: white;
   padding: 20px;
 }

このコードは、クラス名「header」を持つ要素の背景色を変更します。 ' を blue に変更し、テキストの色を白に変更し、20 ピクセルのパディングを追加します。

3. ID セレクター

ID セレクターは、一意の ID を持つ要素を選択するために使用されるセレクターです。一意の ID を持つ要素があり、それにスタイルを適用したい場合は、次のコードを使用します。

 #myElement {
   border: 1px solid black;
   padding: 10px;
 }

このコードは、ID が「myElement」の要素の境界線を黒に設定し、10 を追加します。ピクセルのパディング。

4. 属性セレクター

属性セレクターは、要素の属性値を選択する方法です。たとえば、title 属性を含むすべての要素を選択する場合は、次のコードを使用できます。

 [title] {
   border: 1px solid black;
   padding: 10px;
 }

このコードは、title 属性を持つすべての要素の境界線を黒に設定し、10 ピクセルの境界線を追加します。パディング。

5. 子孫セレクター

子孫セレクターを使用すると、要素のすべての子孫要素を選択できます。たとえば、HTML に title 要素と段落要素を含む div 要素があり、すべての div 要素で段落要素を選択したい場合は、次のコードを使用します。

 div p {
   color: blue;
 }

このコードは、すべての段落要素のテキストの色が青に変わります。

6. 子要素セレクター

子要素セレクターを使用すると、指定された要素の直接の子要素を選択できます。たとえば、h1 要素と ul 要素を含む div 要素があり、div 要素の直接の子である h1 要素を選択する場合は、次のコードを使用します。

 div > h1 {
   font-size: 24px;
 }

Thisコードでは、直接の子 h1 要素のフォント サイズは 24 ピクセルに設定されます。

概要

上記は、CSS の一般的なセレクターのいくつかです。セレクターは、開発者が HTML 要素にスタイルを簡単に適用できるようにする CSS の非常に強力な機能です。美しい Web サイトを構築するには、これらのセレクターに関する知識が不可欠です。この記事があなたのお役に立てれば幸いです、読んでいただきありがとうございます!

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