CSS は任意の属性値に基づいて HTML 要素をターゲットにできますか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-12-10 17:06:14

オリジナル

306 人が閲覧しました

Can CSS Target HTML Elements Based on Any Attribute Value?

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 サイトの他の関連記事を参照してください。