CSS 属性セレクターは「data-role」のような HTML5 データ属性をターゲットにできますか?

HTML5 データ属性の CSS 属性セレクター

質問:

CSS 属性セレクターは、以下に基づいて要素をターゲットにするために使用できますか? HTML5 データ属性 (例: data-role?

答え:

もちろんです。属性セレクターを使用すると、データ属性に基づいて要素を簡単に選択できます。以下に例を示します。

[data-role="page"] {
    /* Styles */
}

このセレクターは、カスタム属性 data-role が値「page」に設定されている要素をターゲットとします。属性名は角括弧で囲む必要があることに注意してください。

属性セレクターのタイプ:

さまざまなシナリオに使用できるさまざまなタイプの属性セレクターがあります:

• [name="value"]: 属性名が正確な値を持つ要素と一致します。 "value".
• [name]: 値に関係なく、属性名が存在する要素と一致します。
• [name~="value"]: 属性名の値が次の値を持つ要素と一致します。部分文字列「value」が含まれています。
• [name^="value"]: 属性名が部分文字列で始まる要素と一致します。 "value".
• [name$="value"]: 属性名が部分文字列 "value" で終わる要素と一致します。

ブラウザ サポート:

最新のブラウザのほとんどは、カスタム データ属性のセレクターを含む属性セレクターをサポートしています。ただし、CSS 検証では名前空間のない属性名は考慮されないため、これらのセレクターによって検証の問題が発生することはないことに注意してください。

以上がCSS 属性セレクターは「data-role」のような HTML5 データ属性をターゲットにできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。