Jaka jest różnica pomiędzy selektorami atrybutów pipe ( / ) i caret ( ^ )?

Jak W3Schools deklaruje zarówno | jak i ^ select atrybut zaczynający się od zdefiniowanej wartości

Nie , | nie jest używany do wybierania elementów, których wartość atrybutu zaczyna się od określonej wartości.

Oto co W3C Spec mówi o tych selektorach. ^{(nacisk jest mój)}

[att/ = val]

Reprezentuje element z atrybutem att, jego wartość jest dokładnie " val " lub zaczyna się od "val" bezpośrednio po " - " (U+002D) .

[att^ = val]

Reprezentuje element z atrybutem att, którego wartość zaczyna się od prefiksu "val". Jeżeli" val " jest pustym łańcuchem, wtedy selektor niczego nie reprezentuje.

Tak więc, symbol | w selektorze atrybutów wybierze tylko elementy, których wartość atrybutu jest dokładnie podaną wartością lub zaczyna się od podanej wartości, po której następuje myślnik .

Jak widać poniżej snippet, selektor atrybutów, który wykorzystuje | ([data-test |= 'val']) nie zaznacza elementu, gdy wartość atrybutu jest taka jak valid, natomiast selektor atrybutów z ^ ([data-test ^= 'val']) tak.

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>

W bardziej realnym scenariuszu, selektor atrybutów z pipe (|) może być używany do zaznaczania elementów i stosowania specyficznych stylów w zależności od ich języka(które można ustawić za pomocą atrybutu lang). Jak widać na fragmencie |= 'en' wybiera wszystkie elementy którego atrybutem lang jest en lub en-GB lub en-US (lub jakikolwiek inny en-*).

Jak stwierdza spec, głównym zamiarem tego selektora było umożliwienie dopasowania podkodów językowych, ale jak wskazuje BoltClock, zostało to w zasadzie zastąpione przez :lang pseudo-selektor klas.

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>

^{(tłumaczenia były przez Google. Każdy błąd był niezamierzony)}

Dodatkowe Informacja: selektor atrybutów, który używa pipe (|) został wprowadzony w CSS2, a selektor atrybutów, który używa cap/caret (^) został wprowadzony w CSS3.

Po prostu:

E [foo / = "en"] zapałki...

Element E, którego atrybut " foo " ma oddzieloną myślnikami listę wartości zaczynającą się od "en"

E[foo^ = "bar"] zapałki...

Element E, którego wartość atrybutu " foo "zaczyna się dokładnie od ciągu znaków" bar "

Rozszerzone Info:

[att/ = val]

Reprezentuje element z att atrybutu, jego wartość albo jest dokładnie "val", albo zaczyna się od" val " zaraz po "-". Ma to przede wszystkim umożliwić dopasowanie podkodów językowych (np. atrybut hreflang na elemencie a w HTML).

[att^ = val]

Reprezentuje element z atrybutem att, którego wartość zaczyna się od prefiksu "val". Jeżeli" val " jest pustym łańcuchem to selektor robi niczego nie reprezentuję.

Źródło: http://www.w3.org/TR/css3-selectors/#selectors

Przykłady

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>

Testowanie selektora rury ( | ).

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

Testowanie selektora caret ( ^ ).

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

Właściwie

[attr ^= value] is value*
Caret (^) oznacza zaczynające się od " value " (i oczywiście dokładna wartość)

[attr |= value] is value OR value - * (tj. [attr = value],[attr ^= value-])
Pipe (|) oznacza albo dokładną "wartość", albo zaczynającą się od "wartość -" (po dash (-))

Przykład:

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