CSS は任意の属性値を持つ要素をターゲットにできますか?

CSS 属性値のターゲティングが簡単になりました

Web ページのスタイル設定の領域では、CSS 属性は HTML 要素の外観と動作を定義する上で極めて重要な役割を果たします。特定の属性値を持つ要素をターゲットにする必要がある状況によく遭遇しますが、その値に関係なく、任意の属性セットを持つ要素にスタイルを適用する必要がある場合はどうすればよいでしょうか?

CSS は属性を持つ要素をターゲットにすることができますか?任意の値?

任意の値の属性を持つ要素を選択できるかどうかという質問に飛び込んでみましょう。次の HTML コードを想像してください。

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

目標は、最初と 3 番目の をターゲットにすることです。 CSSを使用して赤いテキストのタグ。直感的には、

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

を試してみるとよいでしょう。ただし、このセレクターは機能しません。幸いなことに、代替ソリューションがあります。

ユニバーサル属性セレクター

単一の角括弧 ([ ]) で示される CSS ユニバーサル属性セレクターは、指定された属性セットを持つ任意の要素と一致します。その価値に関係なく。この目的のために、以下を使用できます。

a[rel]
{
  color: red;
}

このセレクターは、すべての を正常にターゲットにします。

空の属性値の処理

場合によっては、空の属性値と空でない属性値を区別する必要がある場合があります。ここで、:not() 疑似クラスが役に立ちます。 :not() を使用すると、空の属性値を持つ要素を除外できるため、より正確なターゲティングが可能になります。

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

この強化されたセレクターにより、 要素のみが除外されます。空ではない rel 属性を持つタグはスタイル変更の影響を受けます。

これで完了です。 CSS のユニバーサル属性選択により、定義された任意の属性を持つ要素を簡単にターゲットにすることができ、スタイルの汎用性と適応性が高まります。

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