ホームページ > 記事 > ウェブフロントエンド > CSS でよく使用される 3 つのセレクターは何ですか?
CSS で一般的に使用される 3 つのセレクターは、1. 要素セレクター、2. クラス セレクター、3. ID セレクターです。詳細な紹介: 1. 最も基本的なセレクターである要素セレクター HTML 要素のタグ名に従って要素を選択します 2. クラス セレクター 特定のクラスを持つ要素を選択するために「.」を使用します クラス名は任意です英数字、ただし文字で始まる必要があります; 3. ID セレクター、特定の ID を持つ要素を選択するには、「#」を使用します。ID は一意である必要があります。つまり、各 ID は 1 つの要素のみに対応します。
このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。
CSS で一般的に使用される 3 つのセレクターは次のとおりです:
1. 要素セレクター: これは最も基本的なセレクターであり、HTML 要素要素のタグ名に基づいて選択します。 。たとえば、p セレクターは、ページ上のすべての
要素を選択します。
p { color: red; }
上記のスタイルは、ページ上のすべての
要素のテキストの色を赤に設定します。
2. クラス セレクター: クラス セレクターは、. を使用して、特定のクラスを持つ要素を選択します。クラス名には任意の英数字を使用できますが、文字で始める必要があります。たとえば、.my-class セレクターは、my-class クラスを持つすべての要素を選択します。
.my-class { background-color: yellow; }
上記のスタイルは、my-class クラスのすべての要素の背景色を黄色に設定します。
3. ID セレクター: ID セレクターは # を使用して、特定の ID を持つ要素を選択します。 ID は一意である必要があります。つまり、各 ID は 1 つの要素にのみ対応します。たとえば、#my-id セレクターは、ID my-id を持つ要素を選択します。
#my-id { font-size: 20px; }
上記のスタイルは、ID my-id の要素のフォント サイズを 20 ピクセルに設定します。
これら 3 つのセレクターは CSS で最も一般的に使用されており、単独で使用することも、組み合わせて使用して、より複雑な選択とスタイルを実現することもできます。
上記の 3 つの一般的に使用されるセレクターに加えて、CSS には次のような他の多くのタイプのセレクターもあります:
1. 属性セレクター: この種類のセレクターは、属性と値に基づいて要素を選択します。
2. 疑似クラス セレクター: 疑似クラス セレクターは、マウスオーバー、クリック、フォーカスなどの特定の状態にある要素を選択するために使用されます。たとえば、:hover セレクターは、マウスがホバーしている要素を選択します。
3. 子要素と子孫セレクター: これらのセレクターは、要素の子要素または子孫要素を選択できます。たとえば、div > p は、
を選択し、div p は、
子孫要素を選択します。
4. グループ セレクター: グループ セレクターを使用すると、複数の要素、クラス、または ID を同時に選択し、それらに同じスタイルを適用できます。たとえば、h1、h2、p セレクターは、すべての
要素を同時に選択します。
これらのセレクターは豊富な選択方法を提供し、開発者がページ内の要素を正確に見つけて、それに目的のスタイルを適用できるようにします。同時に、これらのセレクターを理解し、使いこなすことが CSS マスターになるための鍵でもあります。
以上がCSS でよく使用される 3 つのセレクターは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。