|= 和 ^= css 之间的区别答案

【问题标题】：Difference between |= and ^= css|= 和 ^= css 之间的区别
【发布时间】：2022-01-06 18:04:14
【问题描述】：

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

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

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

先有

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

秒有

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

【问题讨论】：

你不应该使用 w3schools 作为来源！查看W3Fools
是的，但由于谷歌的 SEO，我不断从首页搜索中找到它们。
我知道这一点。但是，下次您会知道您应该跳过搜索结果中的这些链接 :)
顺便说一句，我认为我们的任何答案真的回答了你的问题：D
因为^= 和|= 都将匹配en 和en-US

标签： css css-selectors

【解决方案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>

【讨论】：

|= 匹配单词，而^= 不匹配。
@highmaintenance 既然我认为反对票来自您，您能否详细说明我的回答到底哪里不正确？如果我正确理解了您的评论（措辞含糊不清），则它是不正确的：lang="en" - 在这里我将en 视为一个词，它将被两个选择器作为目标 - 正如它应该的那样。或者你的“词”是什么意思？对于lang="en-US" 之类的内容，您可能会争论“单词”的含义，但同样两个选择器都会以该元素为目标。唯一的区别是 |= 明确要求 | (U+002D) 字符。

【解决方案2】：

请检查以下示例。您将更好地了解两个选择器。

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

【讨论】：

【解决方案3】：

既然有 W3C 的官方文档，为什么还要使用 w3schools？

W3C CSS3 Selectors

W3C CSS2 Selectors

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

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

【讨论】：

【解决方案4】：

w3schools 不是很好的知识来源 (check that site)。你应该依赖官方CSS specification：

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/"]

【讨论】：