<p>CSS スタイル セレクターは、特定の属性または関係に基づいて対応する要素を選択し、スタイル設定するために CSS で使用されるメカニズムを指します。 Web ページを作成するプロセスにおいて、セレクターはページ表示の外観とレイアウトを制御するのに役立つ重要な部分です。この記事では、一般的な CSS スタイル セレクターをいくつか紹介します。
- 要素セレクター(要素セレクター)
要素セレクターは、最も一般的なセレクターの 1 つで、要素名に基づいてページ上の要素を選択します。たとえば、p セレクターは、HTML 内のすべての <p> 要素と一致し、それらに対応するスタイルを設定します。
p {
color: red;
}ログイン後にコピー
- クラス セレクター (クラス セレクター)
クラス セレクターには「.」というプレフィックスが付き、要素の CSS クラスを指定してページ上の要素を選択します。たとえば、HTML の class 属性を使用して要素を分類し、これらの要素に同じスタイルを追加できます。 CSS のクラス セレクターの構文は、.classname です。
.warning {
color: yellow;
}ログイン後にコピー
- ID セレクター
ID セレクターにはプレフィックス「#」が付き、各ページの要素 ID は一意です。 ID セレクターを使用すると、指定した要素を正確に選択できます。 CSS の ID セレクターの構文は #idname です。
#header {
background-color: black;
color: white;
}ログイン後にコピー
- 子孫セレクター(子孫セレクター)
子孫セレクターは、子要素内の要素を選択します。 CSS では、子孫セレクターの構文は parent child です。たとえば、次の例では、h1 要素は、posterID 要素内の h1 タグとのみ一致します。
#posterID h1 {
color: blue;
}ログイン後にコピー
- 隣接兄弟セレクター (隣接兄弟セレクター)
隣接兄弟セレクターは、次のことができます。選択される要素の直後にある最初の兄弟。 CSS では、隣接する兄弟セレクターの構文は A B です。たとえば、次の CSS スタイルは、h2 要素の直後にある最初の p 要素を選択します。
h2 + p {
color: #000000;
}ログイン後にコピー
- 属性セレクター (属性セレクター)
属性セレクターは、要素の属性値に基づいて選択します。たとえば、指定された属性値を持つすべての要素を選択できます。属性セレクターの構文は [attribute=value] です。次の例では、値が「https://」で始まる href 属性を含むすべての 要素を選択する属性セレクターを使用します。
a[href^="https://"] {
color: green;
}ログイン後にコピー
- 疑似クラス セレクター (疑似-クラス セレクター)
疑似クラス セレクターは、ステータスや位置に基づいて要素を選択できる CSS セレクターです。一般的に使用される疑似クラス セレクターには、:hover、:focus、:first-child などが含まれます。構文は :pseudo-class です。
a:hover {
background-color: yellow;
}ログイン後にコピー
<p>この記事では、CSS スタイル セレクターの一般的な使用法を紹介します。各セレクターには独自の特定の構文と目的があり、特定の状況に応じて選択できます。 CSS スタイル セレクターを使用すると、Web ページの見た目がより美しくなり、開発効率が向上します。
以上がCSSスタイルセレクターとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
