14

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

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

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

首先有

选择 src 属性值以“https”开头的每个元素

第二个有

选择具有以“en”开头的 lang 属性值的所有元素

4

4 回答 4

9

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

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

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

W3Schools 文档有时并不精确，因此要获得好的文档，请访问MDN或Sitepoint或使用官方W3C 文档。

基本上，|=选择器匹配单词，可选地紧跟连字符（-或分别为 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>

于 2013-03-28T09:19:56.820 回答
5

请检查以下示例。您将在两个选择器之间获得更好的理解。

/* select all lang attribute starting with "en" */
[lang^=en] {
    border: 1px solid red;
}

/* select all hyphen-separated lang attribute starting with "en" */
[lang|=en] {
    background: yellow;
}
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en_gb">Ello!</p>

于 2017-07-10T02:40:19.337 回答
3

当 W3C 的官方文档在那里时，为什么要使用 w3schools？

W3C CSS3 选择器

W3C CSS2 选择器

E[foo^="bar"]一个 E 元素，其 "foo" 属性值正好以字符串 "bar" 开头（属性选择器 CSS3）

E[foo|="en"]一个 E 元素，其“foo”属性有一个以连字符分隔的值列表（从左侧）以“en”开头（属性选择器 CSS2）

于 2013-03-28T09:24:23.390 回答
2

w3schools 不是一个很好的知识来源（查看那个网站）。你应该依赖官方的CSS 规范：

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

E[foo|="en"] 一个 E 元素，其“foo”属性具有以连字符分隔的以“en”开头的值列表（从左侧开始）

用法示例：

以下选择器表示一个 a 元素，其 hreflang 属性的值以“en”开头，包括“en”、“en-US”和“en-scouse”：

a[hreflang|="en"]

下面的选择器代表一个 HTML 对象，引用一个图像：

object[type^="image/"]

于 2013-03-28T09:22:15.440 回答