基本的な CSS セレクター構文をマスターするには、特定のコード例が必要です。 CSS セレクターはフロントエンド開発の非常に重要な部分であり、選択するために使用できます。ドキュメントの HTML のさまざまな要素を変更します。基本的な CSS セレクター構文をマスターすることは、効率的なスタイルシートを作成するために重要です。この記事では、いくつかの一般的な CSS セレクターと対応するコード例を紹介します。 要素セレクター要素セレクターは最も基本的なセレクターであり、要素のタグ名を通じて対応する要素を選択できます。たとえば、すべての段落 (p 要素) を選択するには、次のコードを使用できます。 p { color: blue; }ログイン後にコピークラス セレクター クラス セレクターを使用すると、1 つ以上のクラス名を段落に追加できます。 HTML 要素 、クラス名で対応する要素を選択します。クラス名は . で始まります。たとえば、highlight という名前のクラスをテキストに追加するには、次のようにします。 .highlight { background-color: yellow; }ログイン後にコピーID セレクター ID セレクターを使用すると、一意の ID を HTML 要素に追加できます。対応する要素を ID で選択します。 ID名は#で始まります。たとえば、ID header を持つ要素を追加します。 #header { font-size: 24px; }ログイン後にコピー 子孫セレクター 子孫セレクターは、特定の要素の子孫要素を選択するために使用できます。スペースを使用して 2 つのセレクターを接続します。たとえば、#container の下にあるすべての p 要素を選択するには、次のようにします。 #container p { color: red; }ログイン後にコピー子要素セレクター 子要素セレクターでは、特定の要素の直接の子。 > を使用して 2 つのセレクターを接続します。たとえば、 #navigationli:#navigation > li { display: inline; }ログイン後にコピーpseudo-class selectorpseudo-class selector の下にあるすべての直接の子要素を選択するにはホバー状態、アクセス状態など、特定の状態で要素を選択できます。疑似クラス セレクターは : で始まります。たとえば、ホバー時にリンクを選択するには: a:hover { text-decoration: underline; }ログイン後にコピー隣接兄弟セレクター隣接兄弟セレクターは、別の要素の直後にある要素を選択します。 を使用して 2 つのセレクターを接続します。たとえば、h1 要素の直後の p 要素を選択するには、次のようにします。 h1 + p { font-weight: bold; }ログイン後にコピー属性セレクター属性セレクターは、次のように選択できます。指定された属性を持つ要素は、属性の値に基づいてより正確に選択できます。属性セレクターは、角括弧 [] を使用して属性名と属性値を指定します。たとえば、target=_blank ですべてのリンクを選択するには: a[target="_blank"] { color: pink; }ログイン後にコピー 上記は一般的に使用される CSS セレクターの一部ですが、これは氷山の一角にすぎません。より多くのセレクター構文をマスターすると、HTML 要素をより適切に操作し、柔軟で保守可能なスタイル シートを作成できるようになります。