Quelle est la différence entre les sélecteurs pipe (|) et caret (^)?

Question

Dans w3schools, ils déclarent à la fois | et ^ : sélectionner un élément avec un attribut commençant par une valeur spécifiée .

Alors quelle est la différence?

Answer 1

Caret (^): Attribut commence avec une certaine valeur.

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

<h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>
<h1 rel="friend2-external-sandwich">Attribute Dash Separated</h1>

Pipe (|): Cela permet de sélectionner si le départ d'un tableau de bord-liste séparée par des valeurs d'attribut correspond au sélecteur, ou si la valeur de la chaîne est une correspondance exacte.

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

<h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>
<h1 rel="friend2-external-sandwich">Attribute Dash Separated</h1>

Plus d'informations sur ce sélecteurs vous pouvez trouver ici: https://css-tricks.com/attribute-selectors/

Answer 2

Comme w3schools déclarer à la fois | et ^ sélectionner un attribut de départ avec une valeur définie

Pas de, de la | n'est pas utilisé pour sélectionner les éléments dont la valeur de l'attribut start avec une certaine valeur.

Voici ce que le W3C Spec dit à propos de ces sélecteurs. ^{(l'emphase est mienne)}

[att|=val]

Représente un élément avec l'attribut att, sa valeur soit exactement "val" ou le début avec "val" immédiatement suivi par "-" (U+002D).

[att^=val]

Représente un élément avec l'attribut att dont la valeur commence par le préfixe "val". Si "val" est la chaîne vide, alors le sélecteur de ne pas représenter quoi que ce soit.

Ainsi, l' | symbole dans le sélecteur d'attributs serait de sélectionner uniquement les éléments dont la valeur de l'attribut est soit exactement la valeur donnée ou démarre avec la valeur donnée suivie par un trait d'union.

Comme vous pouvez le voir dans l'extrait de code ci-dessous, le sélecteur d'attributs qui utilise | ([data-test |= 'val']) n'a pas de sélectionner l'élément lorsque la valeur de l'attribut est comme valid alors que l'attribut sélecteur ^ ([data-test ^= 'val']) n'.

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>

---

En plus du monde réel scénario, le sélecteur d'attributs avec tuyau (|) peut être utilisé pour sélectionner les éléments et appliquez le style en fonction de leur langue (qui peut être définie à l'aide de l' lang d'attribut). Comme nous pouvons le voir dans l'extrait de code, |= 'en' sélectionne tous les éléments dont l' lang attribut est soit en ou en-GB ou en-US (ou tout autre en-* pour cette question).

Comme le spec-unis, l'intention première de ce sélecteur était de permettre à la langue de sous-code matches, mais comme BoltClock souligne, cela a été remplacé par l' :lang pseudo-sélecteur de classe.

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>

^{(Les traductions ont été par Google. Aucune erreur n'était pas intentionnelle)}

Informations supplémentaires: Le sélecteur d'attributs qui utilise pipe (|) a été introduit en CSS2 et le sélecteur d'attributs qui utilise le cap/signe (^) a été introduit en CSS3.

Answer 3

Il suffit de mettre:

E[foo|="en"] correspond...

un E élément dont l'attribut "foo" est un trait d'union-liste de valeurs séparées commençant par "fr"

E[foo^="bar"] correspond...

un E élément dont l'attribut "foo" valeur commence exactement à la chaîne "bar"

Renseignements Supplémentaires:

[att|=val]

Représente un élément avec l' att d'attribut, sa valeur soit exactement "val" ou le début avec "val" immédiatement suivi par "-". Cela est principalement destiné à permettre la langue de sous-code correspond à (par exemple, l' hreflang attribut sur l' a élément HTML).

[att^=val]

Représente un élément avec l' att attribut dont la valeur commence par le préfixe "val". Si "val" est la chaîne vide, alors le sélecteur de fait pas de représenter quoi que ce soit.

Source: http://www.w3.org/TR/css3-selectors/#selectors

---

Exemples

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>

Test de la pipe (|) sélecteur.

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

Les tests de l'accent circonflexe (^) sélecteur.

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

JSFIDDLE