it-swarm.it

Cosa fa il selettore [class ^ = "span"]?

Non riesco a capire di cosa si tratta:

Linea 33 di http://Twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css

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

Capisco lo stile ma non l'ho mai visto prima

[class^="span"]
61
PhilD

Ciò significa che una classe che inizia con la parola "span", come:

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

Il simbolo ^ È preso dalle espressioni regolari, in cui questo simbolo si riferisce all'inizio di una stringa.

Va notato che ciò controlla l'inizio dell'attributo class, non l'inizio del classname. Ciò significa che non corrisponderà a detto selettore:

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

L'elemento sopra ha due classi, la seconda delle quali inizia con "span" - ma poiché l'attributo class inizia con "globe", non con "span", non corrisponderà.

Si potrebbe usare [class*=span], Che restituirebbe tutte le classi contenenti span, ma restituirebbe anche altre classi, come wingspan.

AFAIK, il modo per ottenere le classi che iniziano con una stringa è utilizzare un doppio selettore:

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

Questo restituirà la classe che inizia con span, all'inizio dell'attributo o nel mezzo.

(Ricordo anche di aver lavorato in una soluzione nei motori di selezione usati da DOMParser ).

85
SamGoody

Questo è un selettore di attributi, in particolare uno dei selettori di attributo di corrispondenza substring CSS .

Questa regola applica gli stili a qualsiasi elemento il cui attributo class inizia con span (^= significa "inizia con"), che si verifica in qualsiasi elemento con la classe row.

37
BoltClock

Questo è un selettore di attributo CSS.

Dai un'occhiata a http://www.w3.org/TR/css3-selectors/ (Sezione 2)

E [foo ^ = "bar"] un elemento E il cui valore dell'attributo "foo" inizia esattamente con la stringa "bar"

4
Dutchie432