CSS で複数の特定の属性を持つ HTML 要素を選択するにはどうすればよいですか?

複数の属性一致による CSS セレクターの調整

CSS では、属性セレクターを使用して、属性に基づいて HTML 要素を正確に選択できます。複数の属性を扱う場合、次のクエリが発生する場合があります:

Q: 特定の属性名と値の両方を持つ HTML 要素を選択するにはどうすればよいですか?たとえば、「name=Sex」と「value=M」を持つ入力要素をターゲットにしたいと考えています。

A: CSS セレクターで複数の属性を一致させるには、属性セレクターを次のように追加するだけです。必要な名前と値のペア。この例では、正しい構文は次のとおりです。

input[name=Sex][value=M]

このセレクターは、「name=Sex」属性と「value=M」属性を持つ入力要素を選択します。 「name=Sex」や「value=F」など、異なる属性を持つ他の入力要素は選択されません。

W3C 標準では、複数の属性セレクターについてさらに詳しく説明しています。「複数の属性セレクターを使用して、要素の複数の属性を参照することも、同じ属性を複数回参照することもできます。

たとえば、このセレクターは、「hello」属性が以下に等しい SPAN 要素をターゲットにします。 「Cleveland」と「goodbye」属性は「Columbus」と等しい:

span[hello="Cleveland"][goodbye="Columbus"]

属性値が有効な識別子でない場合は、引用符で囲む必要があることに注意してください。

要約すると、複数の値を使用します。属性セレクターを使用すると、要素を特定の属性の組み合わせと照合することで、CSS セレクターを正確に調整できます。

以上がCSS で複数の特定の属性を持つ HTML 要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。