Question

在W3Schools，他们声明|和^均表示：选择具有开始属性且具有指定值的元素

那有什么区别？

Answer 1

插入符号（^）：选择一个元素（<h1>），其中指定属性（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>

管道（|）：选择一个元素（<h1>），其中指定属性（rel）的值恰好是值（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-selectors

Answer 2

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

否，|不用于选择属性值以特定值开头的元素。

以下是W3C Spec关于这些选择器的内容。 ^{（重点是我的）}

[ATT | = VAL]

表示具有att属性的元素，其值正好是＆＃34; val＆＃34;或以＆＃34; val＆＃34;开头紧随其后的是＆＃34; - ＆＃34; （U + 002D）即可。

[ATT ^ = VAL]

表示具有att属性的元素，该属性的值以前缀＆＃34; val＆＃34;开头。如果＆＃34; val＆＃34;是空字符串，然后选择器不代表任何东西。

因此，属性选择器中的|符号将仅选择其属性值恰好为给定值的元素，或者以给定值后跟连字符开头。

正如您在下面的代码段中所看到的，使用|（[data-test |= 'val']）的属性选择器在属性值类似于valid时不会选择该元素，而带有^（[data-test ^= 'val']）的属性选择器。

＆＃13;

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

＆＃13;

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

＆＃13;

在更真实的场景中，带有管道（|）的属性选择器可用于选择元素并根据其语言应用特定样式（可以使用lang属性进行设置）。正如我们在代码段中看到的那样，|= 'en'会选择lang属性为en或en-GB或en-US（或任何其他en-*的所有元素} 对于这个问题）。

正如规范所述，此选择器的主要目的是允许语言子代码匹配，但是BoltClock points out，这基本上已被:lang伪类选择器取代。

＆＃13;

div[lang |= 'en']{
  font-size: 16px;
  background: steelblue;
}

div[lang |= 'zh']{
  font-size: 14px;
  background: mediumslateblue;
}

div{padding: 4px;}

＆＃13;

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

＆＃13;

^{（翻译由Google提供。任何错误都是无意的）}

附加信息：CSS2中引入了使用管道（|）的属性选择器，并引入了使用cap / caret（^）的属性选择器CSS3。

Answer 3

简单地说：

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

一个E元素，其中＆＃34; foo＆＃34;属性具有以＆＃34; en＆＃34;
开头的以连字符分隔的值列表
E[foo^="bar"] 匹配...

一个E元素，其中＆＃34; foo＆＃34;属性值完全以字符串＆＃34; bar＆＃34;
开头

扩展信息：

[att|=val]

表示具有att属性的元素，其值正好是＆＃34; val＆＃34;或以＆＃34; val＆＃34;开头紧接着就是   ＆＃34; - ＆＃34 ;.这主要是为了允许语言子代码匹配   （例如，HTML中hreflang元素的a属性。）

[att^=val]

表示具有att属性的元素，其值以前缀＆＃34; val＆＃34;开头。如果＆＃34; val＆＃34;是选择器的空字符串   不代表什么。

来源：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; }

＆＃13;

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

＆＃13;

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

＆＃13;

jsFiddle

Answer 4

实际上

[attr ^= value]是值*
Caret（^）（Caret（^））表示以“ 值”（显然还有确切的值）开头

[attr |= value]是值或value-* （即[attr = value],[attr ^= value-]）
管道（|）表示精确的“值”或以“值-”开头（后接破折号（-））

示例：

<!DOCTYPE html>
<html>
    <head>
        <style>
            /* [lang=en],[lang^=en-]*/
            [lang|=en] {
                background: cyan;
            }

            [lang^=ar] {
                background: lime;
            }
        </style>
    </head>
    <body>
        <p lang="en">Hello!</p>
        <p lang="en-us">Hi!</p>
        <p lang="en-gb">Ello!</p>
        <p lang="ens">Not me!</p>

        <p lang="ar">سلام</p>
        <p lang="ar-sa">السلام علیکم</p>
        <p lang="ar-ae">السلام علیکم و رحمۃ اللہ</p>
        <p lang="ars">Me as well</p>
    </body>
</html>

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

4 个答案:

实施例

jsFiddle