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

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

CSS を使用すると、開発者は属性に基づいて特定の要素を選択できます。事前定義された属性値を持つ要素をターゲットにするのは簡単ですが、これを任意の属性値に拡張するのは難しい場合があります。

問題ステートメント

任意の属性値を持つ要素を選択できますか?同様:

a[rel=*]
{
    color: red;
}

このセレクターは次のものと一致する必要があります。 HTML:

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

ソリューション

空ではない属性値をターゲットにするには、次のセレクターを使用します。

a[rel]
{
    color: red;
}

このセレクターは、 「rel」属性を持つすべてのアンカー タグと一致します。

処理空の値

ただし、空の属性値と空でない属性値を区別する必要がある場合は、CSS ':not' 疑似クラスを導入します:

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

このセレクター空ではない「rel」属性を持つアンカー タグを選択します。

追加注

デフォルトでは、「href」属性を持つ HTML アンカー タグには「cursor: pointer」スタイルが適用されます。この機能は、属性値の存在に基づいて要素を選択できる可能性を強調します。

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