css - |= と ^= css の違い

Question

|=と^=cssの違いは何ですか?

このリンクのため、1 つではありませんが、なぜ 2 つのものが重複しているのでしょうか。 http://www.w3schools.com/cssref/css_selectors.asp

[属性|=値] および [属性^=値]

最初に持っている

src 属性値が「https」で始まるすべての要素を選択します

2番目に持っている

「en」で始まる lang 属性値を持つすべての要素を選択します

Answer 1

w3cドキュメントの公式説明がすべてを語っていると思います：

E[foo|="en"]- foo 属性値が en で始まるハイフンで区切られた値のリストである E 要素

E[foo^="bar"]- foo 属性値が正確に文字列 "bar" で始まる E 要素

W3Schools のドキュメントは不正確な場合があるため、適切なドキュメントについては、MDNまたはSitepointにアクセスするか、公式のW3C ドキュメントを使用してください。

基本的に、|=セレクターは、オプションで直後にハイフン (またはそれぞれ U+002D) が続く単語に一致-し、複合クラスおよび言語属性で役立ちます。

<div class="wrapper-inner"><span lang="en-GB">...</span></div>

div[class|='wrapper']{/*...*/}
span[lang|='en']{/*...*/}

^=はもう少し一般的で、基本的には「部分文字列一致」であり^、正規表現とまったく同じように動作します。

次の例で、2 つのセレクターの一致方法の違いを確認できます。

*{
color:red;
/* now, if |= or ^= selector fails, the color is red */
}

[class|=en],[class^=de]{
color:green;
}
div::after{content:"FAIL"}
[class|=en]::after,[class^=de]::after{content:"pass"}

<div class="en-US">Case 1.1: |=en matching "en-US": </div>
<div class="en">Case 1.2: |=en matching "en": </div>
<div class="en-">Case 1.3: |=en matching "en-": </div>
<div class="en,">Case 1.4: |=en matching "en,": </div>
<div class="english">Case 1.5: |=en matching "english": </div>
<div class="en ">Case 1.6: |=en matching "en ": </div>
<div class="de-DE">Case 2.1: ^=de matching "de-DE": </div>
<div class="de">Case 2.2: ^=de matching "de": </div>
<div class="de ">Case 2.3: ^=de matching "de ": </div>
<div class="deutsch">Case 2.4: ^=de matching "deutsch": </div>

Answer 2

W3C による公式ドキュメントが公開されているのに、なぜ w3schools を使用するのでしょうか。

W3C CSS3 セレクター

W3C CSS2 セレクター

E[foo^="bar"]「foo」属性値が文字列「bar」で始まる E 要素 (属性セレクター CSS3)

E[foo|="en"]「foo」属性が「en」で始まる (左から) ハイフンで区切られた値のリストを持つ E 要素 (属性セレクター CSS2 )

Answer 3

w3schools は良い知識源ではありません (そのサイトを確認してください)。公式のCSS 仕様に依存する必要があります。

E[foo^="bar"] 「foo」属性値が文字列「bar」で正確に始まる E 要素

E[foo|="en"] 「foo」属性が、(左から)「en」で始まるハイフンで区切られた値のリストを持つ E 要素

使用例:

次のセレクターは、「en」、「en-US」、「en-scouse」など、hreflang 属性の値が「en」で始まる a 要素を表します。

a[hreflang|="en"]

次のセレクターは、画像を参照する HTML オブジェクトを表します。

object[type^="image/"]