В чем разница между переключателями атрибутов pipe (|) и cart (^)?

Ответ 1

Caret (^): выбирает элемент (<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>

Ответ 2

Как w3schools объявляют оба | и ^ выберите атрибут, начинающийся с определенного значения

Нет, | не используется для выбора элементов, значение атрибута которых начинается с определенного значения.

Вот что говорит об этих селекторах W3C Spec. ^{(акцент мой)}

[ATT | = значение]

Представляет элемент с атрибутом att, его значение либо является точно "val", либо начинается с "val", а затем "-" (U + 002D).

[ATT ^ = значение]

Представляет элемент с атрибутом 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>

Ответ 3

Проще говоря:

E [foo | = "en" ] соответствует...

элемент E, у которого атрибут "foo" имеет список значений, дефинированный от деления, начиная с "en"

E [foo ^ = "bar" ] соответствует...

элемент E, значение атрибута "foo" начинается именно с строки "bar"

Расширенная информация:

[att | = val]

Представляет элемент с атрибутом att, его значение либо является точно "val", либо начинается с "val", за которым следует "-". Это в первую очередь предназначено для обеспечения соответствия языкового подкода (например, атрибут hreflang в элементе a в HTML).

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

Ответ 4

На самом деле

[attr ^= value] - значение *
Caret (^) означает начало с " значения " (и, очевидно, точное значение)

[attr |= value] - значение OR value- * (т.е. [attr = value],[attr ^= value-])
Труба (|) означает либо точное "значение", либо начиная с "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>