CSS3 属性セレクターを使用して JS の役割を置き換える方法

CSS3 では、アニメーションやフィルターなどの特殊効果や新しいレイアウト技術の導入に加え、セレクターも強化されており、これまで JS でしか実行できなかった作業が完了できるようになりました。次に、属性に基づいて要素を一致させるための強力な CSS3

属性セレクター を紹介します。これは、[type] などの単一の属性、または [type=checkbox] や [for="email"] などの属性と値の組み合わせにすることができます。

属性セレクターを使用して、属性と部分文字列の有無を照合することもできます。たとえば、スペースで区切られたリスト内の属性値を照合したり、文字列 tel: で始まる属性値を照合したりできます。 en-US などのハイフンで区切られた属性値を照合することもできます。ハイフンのマッチングとスペースで区切られた属性値リストのマッチングは、CSS2 の時点で定義されています。

CSS3 の機能強化は、部分一致ルールの追加です。この記事では、新しく導入された属性セレクター (属性セレクター) の使用に焦点を当てます。

1. 部分一致

完全な属性値を使用して一致させるのは非常に一般的な方法ですが、CSS3 では部分一致を使用できます:

[att~=val]

ここで att は属性を表します。 val スペースで区切られた属性値のリスト内の値を表します。チルダ ~ は部分一致のセマンティクスを表します。

例:

ikinsoft

2. 部分文字列のマッチング

部分文字列を渡すこともできます。

正規表現に似た属性値の一致:

^= : 先頭から一致

$= : 末尾から一致

*= : 特定の部分文字列が含まれています

たとえば、次の HTML コード:

ikinsoft オンライン サポートに電話する

これらの事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングなコンテンツについては、他のコンテンツにも注目してください。 php中国語サイト関連記事！

関連書籍:

CSS3のtranslate属性の詳細な紹介

CSS3で回転ハロー効果を実装する手順

CSS3の循環スタイルのブレッドクラムコードを実装する手順

以上がCSS3 属性セレクターを使用して JS の役割を置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。