任意の値の属性を持つ CSS 要素をターゲットにするにはどうすればよいですか?

CSS で任意の値の属性を持つ要素をターゲットにする

CSS では、属性に基づいて要素をターゲットにすることが必要になることがよくあります。特定の属性値を持つ要素を選択するのは簡単ですが、任意の属性値を持つ要素をターゲットにするのはより難しい場合があります。

質問: 任意の属性を持つ要素を選択する

どうすればよいでしょうか任意の値の属性を持つターゲット要素 (属性が要素に追加されていない場合を除く)?たとえば、「rel」属性の値を持つアンカー タグをターゲットにしたいとします。

答え: 空の値を持つ属性セレクターを使用する

実現するにはこれにより、空の値を指定して属性セレクターを使用できます。次の CSS ルールは、「rel」属性が定義されているアンカー タグをターゲットとしています:

a[rel] {
    color: red;
}

このルールは、次の HTML の最初と 3 番目のアンカー タグと一致します:

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

更新: 空の値と空でない値の区別

場合によっては、空の属性値を持つ要素と空でない値を持つ要素を区別するために必要な場合があります。これを行うには、CSS ":not" 疑似クラスを使用できます:

a[rel]:not([rel=""]) {
    color: red;
}

このルールは、空ではない "rel" 属性値を持つアンカー タグのみをターゲットにします。

以上が任意の値の属性を持つ CSS 要素をターゲットにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。