CSS は任意の属性値に基づいて HTML 要素をターゲットにできますか?

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

CSS では、次に示すように、特定の属性に基づいて要素をターゲットにすることができます。以下の例:

input[type=text] {
    font-family: Consolas;
}

しかし、よくある疑問が生じます: 要素は何らかの属性値に基づいてターゲットを設定しますか?この記事では、このトピックについて説明します。

属性セレクターの使用

任意の属性値を持つ要素をターゲットにするには、属性セレクターを使用できます。属性名の後の値を省略すると、その属性を持つすべての要素が選択されます。例:

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>

この動作は、 に適用されるデフォルトのカーソル: ポインター スタイルを反映しています。

空の属性値の処理

場合によっては、空の属性値と空でない属性値を区別する必要がある場合があります。これは、:not 擬似クラスを属性セレクターと組み合わせて使用​​することで実現できます:

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

このルールは、値が空の (つまり、値がない) ものを除く、rel 属性を持つすべてのアンカー タグを対象とします。が指定されています)。

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