属性値を CSS セレクターとして使用できますか?

属性値を CSS セレクターとして使用できますか?

入力値に基づいて CSS を動的に更新することは、Web 開発における一般的な要件です。 CSS セレクターは通常、静的属性をターゲットにするため、ブラウザーは本質的にこの機能をサポートしません。

動的値

説明したように、単純な CSS ルールは実際の値ではなく属性値をターゲットにします。動的更新の場合、JavaScript を使用して入力値に基づいて CSS を操作できます。

元の回答

ただし、CSS 属性セレクターを使用すると、静的な値のターゲティングも可能です:

<code class="css">input[value="United States"] { color: #F90; }</code>

このセレクターは、値属性が「米国」の入力をターゲットにし、テキストの色を赤に設定します。

CSS 属性セレクター

CSS 属性セレクターは、次の方法で入力属性を参照します。

• [attr] - 値に関係なく、設定された「attr」属性を持つ要素と一致します。
• [attr=val] - 「」に等しい「attr」属性値を持つ要素と一致します。 val".
• [attr~=val] - 「val」を含む「attr」属性値を持つ要素と一致します。
• [attr|=val] - 「attr」を持つ要素と一致します属性値は「val」に等しいか、「val-」で始まります。

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