CSS セレクターにはどのような属性セレクターがありますか?

CSS セレクターの属性セレクターには、等しいセレクター、含むセレクター、開始セレクター、終了セレクター、部分文字列セレクター、複数値セレクター、および負のセレクターが含まれます。詳細な紹介: 1. 角括弧と等号を使用する等号セレクターは、指定された属性値を持つ要素を選択することを意味します; 2. 角括弧とアスタリスクを使用する包含セレクターは、指定された文字列の属性値を含む要素を選択することを意味します; 3.セレクターを開始し、角括弧とアスタリスクを使用して、指定された文字列で始まる属性値を持つ要素を選択します; 4. セレクターを終了し、角括弧やドル記号などを使用します。

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

CSS セレクターは、属性値に基づいて要素を選択するためのさまざまな属性セレクターを提供します。これらの属性セレクターは、属性値の等価性、包含、開始、終了などに基づいて選択できます。 CSS の一般的な属性セレクターは次のとおりです:

1. 等号セレクター: 角括弧 ([]) と等号 (=) を使用して、指定された属性値を持つ要素を選択します。たとえば、`[class="red"]` は、クラス属性値が「red」であるすべての要素を選択することを意味します。

2. セレクターを含む: 角括弧 ([]) とアスタリスク (*) を使用して、指定された文字列の属性値を含む要素を選択します。たとえば、`[href*="example"]` は、href 属性値に「example」が含まれるすべての要素を選択することを意味します。

3. セレクターで始まる: 角括弧 ([]) とキャレット (^) を使用して、指定した文字列で始まる属性値を持つ要素を選択します。たとえば、`[class^="red"]` は、クラス属性値が「red」で始まるすべての要素を選択することを意味します。

4. セレクターで終わる: 角括弧 ([]) とドル記号 ($) を使用して、指定した文字列で終わる属性値を持つ要素を選択します。たとえば、`[class$="red"]` は、クラス属性値が「red」で終わるすべての要素を選択することを意味します。

5. 部分文字列セレクター: 角括弧 ([]) と縦棒記号 (|) を使用して、指定された属性値を持つ要素を選択するか、属性値は指定された文字列で始まり、要素の後にハイフンが続きます。たとえば、`[lang|="en"]` は、lang 属性値が「en」である要素、または属性値が「en-」で始まる要素をすべて選択することを意味します。

6. 複数の値セレクター: 角括弧 ([]) と等号 (=) を使用して複数の属性値を同時に指定します。これは、指定された属性値のいずれかを選択することを意味します。要素。複数の属性値はスペースで区切ります。たとえば、`[class="red blue"]` は、クラス属性値が「red」または「blue」であるすべての要素を選択することを意味します。

7. 否定セレクター: 角括弧 ([]) とコロン (:not()) を使用して、指定された属性値を持たない要素を選択します。たとえば、`[class]:not([class="red"])` は、class 属性を持つが「red」ではないすべての要素を選択することを意味します。

上記は CSS の一般的な属性セレクターです。これらのセレクターを使用すると、属性値に基づいて Web ページ内の要素を選択およびスタイルし、豊かで多様な効果を実現できます。同時に、属性セレクターを他のセレクターや疑似クラス セレクターと組み合わせて使用​​して、選択範囲と条件をさらに拡張することもできます。

以上がCSS セレクターにはどのような属性セレクターがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。