CSSの属性セレクターとは何ですか？属性セレクターの使用

CSSの属性セレクターとは何ですか?この記事では、CSS 属性セレクターについて説明し、属性セレクターの機能とその使用方法を理解できるようにします。困っている友人は参考にしていただければ幸いです。

css 属性セレクターとは何ですか?用途は何ですか?

HTML 内の要素には、その動作を表示または変更する追加の値である属性を持つことができます。 HTML には多くの属性が含まれていますが、すべての属性がすべての HTML 要素に適用できるわけではありません。要素に関係のないプロパティは要素に影響を与えません。

プロパティが正しく適用されているかどうかに関係なく、CSS 経由でプロパティを選択できます。ただし、Web サイト上の任意の場所で無効な HTML 属性を使用することは、ブラウザによって無効な HTML の解釈が異なるため、非常に悪い習慣です。サイトが奇妙に見えるのはブラウザのせいではありません。ブラウザは、エラー コードを穴埋めして説明しようとしているだけです。

ただし、CSS 属性セレクターを使用すると、特定の属性または特定の値の属性を持つ要素を選択できます。つまり、指定された属性名に基づいて対応するタグを見つけて、その属性を設定できます。 [関連ビデオチュートリアルをお勧めします: css3 チュートリアル ]

CSS 属性セレクターの使用法

HTML 内の属性値識別子または文字列である必要があります。この仕様は、セレクター内のプロパティ名と値の大文字と小文字の区別がドキュメント言語に依存すると述べているため、かなり曖昧です。ブラウザーの動作には一貫性がないため、最も安全な方法は、使用するケースが CSS と HTML の間で一貫していることを確認することです。

属性セレクターは 7 つの方法 (CSS3 仕様から始まる) で一致させることができます:

1, []

すべてを配置値に関係なく、 属性を含む要素。

例:

<div data-colour="green"></div>
<div data-colour="blue"></div>
<div data-colour="yellow"></div>

css コード選択:

[data-colour] { 
   /* 一些性质，例：color..... */ 
}

2, [=]

属性値が であるすべての要素を見つけます。

<div data-colour="green"></div>

[data-colour="green"] { 
    /* 一些性质 */ 
}

3, [~=]

属性を使用して要素を見つけます。その値はスペースです。 - で区切られた単語のリスト。そのうちの 1 つは である必要があります。

自体にスペースを含めたり、空の文字列にすることはできません。

<div data-colour="green yellow blue"></div>

[data-colour~="green"] { 
    /* 一些性质 */ 
}

4, [|=]

属性を使用して、値が正確に または で始まり、その後に「-」が続きます。

注: 主に、「en」、「en-US」、「en-UK」などの言語サブコードの一致に使用されます。

<div data-colour="green-table"></div>
<div data-colour="green-chair"></div>
<div data-colour="green-bottle"></div>

[data-colour|="green"] { 
    /* 一些性质 */ 
}

5, [^=]

部分文字列一致セレクター。 属性を使用して、値が で始まる要素を見つけます。

注: を空の文字列にすることはできません。

<div data-colour="greenish-yellow"></div>
<div data-colour="greengoblin"></div>

[data-colour^="green"] { 
    /* 一些性质 */ 
}

6, [$=]

部分文字列一致セレクター。 属性を使用して、値が で終わる要素を見つけます。

注: を空の文字列にすることはできません。

<div data-colour="yellowish-green"></div>
<div data-colour="seagreen"></div>

[data-colour$="green"] { 
    /* 一些性质 */ 
}

7, [*=]

部分文字列一致セレクター。 属性を使用して、値に のインスタンスが含まれる要素を見つけます。

注: を空の文字列にすることはできません。

<div data-colour="goblingreenish"></div>

[data-colour*="green"]{ 
    /* 一些性质 */ 
}

結合された属性セレクター

属性セレクターは、クラスおよび疑似クラスと同じ特定のレベルを持ち、属性セレクターを他のセレクターと組み合わせることができます。要素、クラス、IDなどを組み合わせます。例:

div[data-colour="green"] {
  /* 特异性为11 */
}
.swatch[data-colour="green"] {
  /* 特异性为20 */
}
#tile25[data-colour="green"] {
  /*特异性为110 */
}

複数の属性セレクターを組み合わせて、特定のパターンに一致させることもできます。たとえば、「green」という単語を含む代替テキストを持つ 2x 画像のみをターゲットにしたい場合、セレクターは次のようになります。

img[srcset~="2x"][alt*="green"] { 
    /* 一些性质 */ 
}

さらに、属性値は文字列として読み取られるため、クラスや ID とは異なり、特殊文字をエスケープして一致させることを心配する必要はありません。これは、次のものを自由に持つことができることを意味します:

[data-emotion="

以上がCSSの属性セレクターとは何ですか？属性セレクターの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。