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

Chez W3Schools, ils déclarent les deux | et ^ signifie: Sélectionnez un élément avec un atsortingbut commençant par une valeur spécifiée .

Alors, quelle est la différence?

Caret (^): sélectionne un élément (

) où la valeur de l’atsortingbut spécifié ( rel ) commence par une certaine valeur ( val ):

 h1[rel^="val"] { /** formatting */ } 
 h1[rel^="friend"] { color: blue; } 
 

I'm Blue.

I'm Blue.

I'm Black.

Comme w3schools déclarent les deux | et ^ select atsortingbut commençant par une valeur définie

Non , le | n’est pas utilisé pour sélectionner des éléments dont la valeur d’atsortingbut commence par une certaine valeur.

Voici ce que dit la spécification W3C à propos de ces sélecteurs. (c’est moi qui souligne)

[att | = val]

Représente un élément avec l’atsortingbut att, sa valeur étant exactement “val” ou commençant par “val” immédiatement suivie de “-” (U + 002D) .

[att ^ = val]

Représente un élément avec l’atsortingbut att dont la valeur commence par le préfixe “val”. Si “val” est la chaîne vide, le sélecteur ne représente rien.

Donc, le | Le symbole dans le sélecteur d’atsortingbut ne sélectionnerait que les éléments dont la valeur d’atsortingbut est soit exactement la valeur donnée, soit la valeur donnée suivie d’un trait d’union .

Comme vous pouvez le voir dans l’extrait ci-dessous, le sélecteur d’atsortingbut qui utilise | ( [data-test |= 'val'] ) ne sélectionne pas l’élément lorsque la valeur de l’atsortingbut est comme valid alors que le sélecteur d’atsortingbut avec ^ ( [data-test ^= 'val'] ) le fait.

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

Tout simplement:

E [foo | = “en”] correspond à …

un élément E dont l’atsortingbut “foo” a une liste de valeurs séparées par un trait d’union commençant par “en”

E [foo ^ = “bar”] correspond à …

un élément E dont la valeur d’atsortingbut “foo” commence exactement par la chaîne “bar”

Info étendue:

[att | = val]

Représente un élément avec l’atsortingbut att , sa valeur étant exactement “val” ou commençant par “val” immédiatement suivie de “-“. Ceci est principalement destiné à permettre les correspondances de sous-code de langue (par exemple, l’atsortingbut hreflang sur l’élément a en HTML).

[att ^ = val]

Représente un élément avec l’atsortingbut att dont la valeur commence par le préfixe “val”. Si “val” est la chaîne vide, le sélecteur ne représente rien.

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


Exemples

HTML

 
  • testing atsortingbute selectors
  • testing atsortingbute selectors
  • testing atsortingbute selectors
  • testing atsortingbute selectors
  • testing atsortingbute selectors

Test du sélecteur de conduite (|)

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

entrer la description de l'image ici

Test du sélecteur de caret (^).

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

entrer la description de l'image ici

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

Testing the pipe (|) selector.

  • testing atsortingbute selectors
  • testing atsortingbute selectors
  • testing atsortingbute selectors
  • testing atsortingbute selectors
  • testing atsortingbute selectors

Testing the caret (^) selector.

  • testing atsortingbute selectors
  • testing atsortingbute selectors
  • testing atsortingbute selectors
  • testing atsortingbute selectors
  • testing atsortingbute selectors