pipe(|)和caret(^)属性选择器之间有什么区别？

Question

在W3Schools,他们声明两者|并^表示:选择具有以指定值开头的属性的元素.

那有什么区别？

Answer 1

Caret(^):选择一个element(<h1>),其中指定的attribute(rel)的值以某个值(val)开头:

h1[rel^="val"] { /** formatting */ }

h1[rel^="friend"] { color: blue; }

<h1 rel="friend-external-sandwich">I'm Blue.</h1>
<h1 rel="friend2-external-sandwich">I'm Blue.</h1>
<h1 rel="external-sandwich">I'm Black.</h1>

Pipe(|):选择一个element(<h1>),其中指定的attribute(rel)的值正好是value(val),或者以紧跟在-(val-)之后的值开始:

h1[rel|="val"] { /**formatting */ }

h1[rel|="friend"] { color: red; }

<h1 rel="friend-external-sandwich">I'm Red.</h1>
<h1 rel="friend2-external-sandwich">I'm Black.</h1>

有关此选择器的更多信息,请访问:https://css-tricks.com/attribute-selectors/或官方CSS规范:https://www.w3.org/TR/css3-selectors/#attribute-选择

Answer 2

当w3schools宣布两个| 和^选择以定义值开头的属性

不,|不用于选择属性值以特定值开头的元素.

以下是W3C规范关于这些选择器的内容.^{(重点是我的)}

[ATT | = VAL]

表示具有att属性的元素,其值正好是"val"或以"val"开头,后跟" - "(U + 002D).

[ATT ^ = VAL]

表示具有att属性的元素,该属性的值以前缀"val"开头.如果"val"是空字符串,则选择器不代表任何内容.

因此,|属性选择器中的符号将仅选择其属性值正好是给定值的元素,或者以给定值后跟连字符开头.

正如你可以在下面的代码段看到,其使用属性选择器|([data-test |= 'val']当该属性值是等)不选择元件valid而与所述属性选择器^([data-test ^= 'val'])一样.

div[data-test |= 'val'] {
  color: beige;
}
div[data-test ^= 'val'] {
  background: red;
}

<div data-test='val'>Hello</div>
<div data-test='val-id'>Hello</div>
<div data-test='valid'>Hello</div>

在更真实的场景中,带有pipe(|)的属性选择器可用于选择元素并根据其语言(可以使用lang属性设置)应用特定样式.正如我们在代码段中看到的那样,|= 'en'选择lang属性为en或者en-GB或en-US(或任何其他en-*)的所有元素.

正如规范所述,这个选择器的主要目的是允许语言子代码匹配,但是当BoltClock指出时,它基本上被:lang伪类选择器所取代.

div[lang |= 'en']{
  font-size: 16px;
  background: steelblue;
}

div[lang |= 'zh']{
  font-size: 14px;
  background: mediumslateblue;
}

div{padding: 4px;}

<div lang='en'>English: The grass is green in colour.</div>
<div lang='en-GB'>English (UK): The grass is green in colour.</div>
<div lang='en-US'>English (US): The grass is green in color.</div>
<hr>
<div lang='zh-CN'>Chinese (Simplified): ??????</div>
<div lang='zh-TW'>Chinese (Traditional): ??????</div>

^{(翻译是由谷歌.任何错误是无意的)}

附加信息:| CSS2中引入了使用pipe()的属性选择器,^CSS3中引入了使用cap/caret()的属性选择器.

Answer 3

简单的说:

E [foo | ="en"] 匹配......

一个E元素,其"foo"属性具有以"en"开头的以连字符分隔的值列表

E [foo ^ ="bar"] 匹配......

一个E元素,其"foo"属性值恰好以字符串"bar"开头

扩展信息:

[ATT | = VAL]

表示具有该att属性的元素,其值正好是"val"或以"val"开头,后跟" - ".这主要是为了允许语言子代码匹配(例如,HTML中元素的hreflang属性a).

[ATT ^ = VAL]

表示具有att属性的元素,其值以前缀"val"开头.如果"val"是空字符串,则选择器不代表任何内容.

资料来源:http://www.w3.org/TR/css3-selectors/#selectors

例子

HTML

<ul>
    <li title="test">testing attribute selectors</li>
    <li title="testing">testing attribute selectors</li>
    <li title="testing test">testing attribute selectors</li>
    <li title="testing-test">testing attribute selectors</li>
    <li title="test-testing">testing attribute selectors</li>
</ul>

测试管道(|)选择器.

li[title|="testing"] { background-color: aqua; }

测试插入符号(^)选择器.

li[title^="testing"] { background-color: pink; }

#pipe > li[title|="testing"] {
  background-color: aqua;
}
#caret > li[title^="testing"] {
  background-color: pink;
}

<p>
  <code>Testing the pipe (|) selector.</code>
</p>
<ul id="pipe">
  <li title="test">testing attribute selectors</li>
  <li title="testing">testing attribute selectors</li>
  <li title="testing test">testing attribute selectors</li>
  <li title="testing-test">testing attribute selectors</li>
  <li title="test-testing">testing attribute selectors</li>
</ul>

<hr>

<p>
  <code>Testing the caret (^) selector.</code>
</p>
<ul id="caret">
  <li title="test">testing attribute selectors</li>
  <li title="testing">testing attribute selectors</li>
  <li title="testing test">testing attribute selectors</li>
  <li title="testing-test">testing attribute selectors</li>
  <li title="test-testing">testing attribute selectors</li>
</ul>

的jsfiddle