web-dev-qa-db-fra.com

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

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 ça avant

[class^="span"]
csscss3twitter-bootstrapcss-selectors
61
PhilD

Cela signifie une classe commençant par le mot "span", comme:

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

Le symbole ^ Est tiré d'expressions régulières, où ce symbole fait référence au début d'une chaîne.

Il convient de noter que cela vérifie le début de l'attribut de classe, pas le début du nom de classe. Ce qui signifie qu'il ne correspondra pas audit sélecteur:

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

L'élément ci-dessus a deux classes, dont la seconde commence par "span" - mais comme l'attribut class commence par "globe", et non par "span", il ne correspondra pas.

On pourrait utiliser [class*=span], Qui retournerait toutes les classes contenant span, mais cela retournerait également d'autres classes, telles que wingspan.

AFAIK, la façon d'obtenir des classes qui commencent par une chaîne est d'utiliser un double sélecteur:

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

Cela retournera la classe commençant par span, que ce soit au début de l'attribut ou au milieu.

(Je me souviens également avoir travaillé dans une solution dans les moteurs de sélection maison utilisés par DOMParser ).

85
SamGoody

Il s'agit d'un sélecteur d'attribut, en particulier l'un des sélecteurs d'attributs de correspondance de sous-chaîne CSS .

Cette règle applique des styles à tout élément dont l'attribut class commence par span (^= signifie "commence par"), qui se produit dans n'importe quel élément avec la classe row.

37
BoltClock

Il s'agit d'un sélecteur d'attribut CSS.

Jetez un œil à 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"

4
Dutchie432