css - |= 和 ^= css 之间的区别

Question

css 中的 |= 和 ^= 有什么区别？

由于这个链接它不是一个，但他们为什么要为两个重复的东西而烦恼。 http://www.w3schools.com/cssref/css_selectors.asp

[属性|=值] 和[属性^=值]

先有

Selects every element whose src attribute value begins with "https"

第二个有

Selects all elements with a lang attribute value starting with "en"

Answer 1

我认为w3c文档中的官方描述说明了一切:

E[foo|="en"] - 一个 E 元素，其 foo 属性值是以连字符分隔的以 en 开头的值列表

E[foo^="bar"] - 一个 E 元素，其 foo 属性值恰好以字符串“bar”开头

W3Schools 文档有时不精确，因此要获得好的文档，请转到 MDN , 或 Sitepoint或使用官方W3C Document .

基本上，|= 选择器匹配可选地紧跟连字符(分别为 - 或 U+002D)的单词，并且对复合类和语言属性很有用。

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

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

^= 更通用一些，基本上是“子字符串匹配”，其行为与正则表达式中的 ^ 完全一样。

您可以在以下示例中看到两个选择器匹配方式的不同:

*{
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>