Que fait le sélecteur [class ^ = "span"]?

Question

Je ne peux pas comprendre ce que c'est:

Ligne 33 de http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css

 .row [class^="span"] {
  display: inline;
  float: left;
  margin-left: 20px;
}
 

Je comprends le style mais je n'ai jamais vu cela auparavant

 [class^="span"]
 

Answer 1

Cela signifie que la classe commence avec le mot "durée", tels que:

<div class="spanning"></div>

L' ^ symbole est pris à partir d'expressions régulières, où ce symbole désigne le début d'une chaîne.

Il convient de noter que cette vérification pour le début de l'attribut de classe, pas le début de la classe. Ce qui signifie qu'il ne sera pas du match, a déclaré sélecteur:

<div class="globe spanning"></div>

Cet élément a deux classes, la seconde commence avec le "span" - mais puisque l'attribut class commence par "monde", pas avec "span", il ne sera pas le match.

On peut utiliser [class*=span], qui permettrait le retour de toutes les classes contenant de l'étendue, mais ce serait aussi le retour d'autres classes, tels que wingspan.

Autant que je sache, la façon d'obtenir des classes qui commencent par une chaîne de caractères sont à utiliser un double sélecteur:

.row [class^="span"], .row [class*=" span"]{}

Ce sera le retour de la classe de début avec la durée, à savoir au début de l'attribut, ou dans le milieu.

(Je me souviens aussi de travailler dans une solution dans le homegrown sélecteur de moteurs utilisés par DOMParser).

Answer 2

Il s’agit d’un sélecteur d’attributs, en particulier l’un des sélecteurs d’attributs correspondant à la sous-chaîne CSS3 .

Cette règle applique les styles à tout élément dont l'attribut class commence par span ( ^= signifie "commence par"), ce qui se produit dans tous les éléments de la classe row .

Answer 3

C'est un sélecteur d'attribut CSS.

Consultez le site http://www.w3.org/TR/css3-selectors/ (section 2)

E [foo ^ = "bar"] un élément E dont la valeur d'attribut "foo" commence exactement par la chaîne "bar"