È possibile utilizzare il selettore di classe jolly css dove esistono più valori di classe?

C'è un selettore CSS dove posso selezionare tutti i tasselli con classe contenente icon- *È possibile utilizzare il selettore di classe jolly css dove esistono più valori di classe?

<a class="icon-a icon-large scrollTo" href="#a"></a> 
<a class="icon-large icon-b scrollTo" href="#b"></a> 
<a class="icon-large scrollTo icon-c" href="#c"></a>

Ho appena mescolate l'icon- dal voglio controllare se il selettore CSS in grado di gestire tutti i casi.

Desidero poter modificare lo stile di tutte le ancore che contengono l'icona di classe- *. Questo codice non sembra funzionare.

a [class^="icon-"], a [class*=" icon-"] { 
    text-decoration: none; 
    color: #1BA1E2; 
}

L'opzione Javascript è la mia unica?

fonte

2013-06-05 atp03

'color: #PINK;' il '#' è troppo? – bwoebi

Non è possibile avere una classe che contiene spazio, quindi il secondo selettore non ha senso. – Barmar

@Barmar: ma puoi avere un attributo class * * con un valore che contiene uno spazio. È proprio lì nel markup - gli spazi sono usati per separare i nomi delle classi. – BoltClock

Si stava utilizzando un selettore non corretta - a [class] è tutti i tasselli con class come descendant.

Fondamentalmente, viene scelto come target qualsiasi elemento decrescente da <a>, che inizia con o contiene la classe icon-.

quello che vuoi è di selezionare tutte le ancore a partire da o che contengono quella classe stessi-a[class]:

a[class^="icon-"], a[class*=" icon-"] { 
    text-decoration: none; 
    color: #1BA1E2; 
}

jsFiddle example here.

fonte

2013-06-05 15:07:34 lifetimes

Sono un ceco noob completo. Grazie! Il secondo selettore è effettivamente necessario? Non sono proprio sicuro di quello che fa da quando ho copiato questo codice da font-awesome nel tentativo di scavalcare qualcosa. – atp03

@ user1133619: Il primo selettore è il più appropriato e sì entrambi fanno la stessa cosa in questo contesto. – Adrift

Sì - ma è necessario prima di rimuovere lo spazio tra il selettore di tipo e il selettore di attributo e lo spazio nel valore dell'attributo:

a[class^="icon-"], a[class*="icon-"] { 
text-decoration: none; 
color: pink; /* get rid of the # */ 
}

http://jsfiddle.net/c8YdD/1/

fonte

2013-06-05 15:07:56 Adrift

E ora la domanda è cambiata in '# 1BA1E2' che è decisamente * non * rosa ...?! – BoltClock

Nessun problema uomo, so che non eri tu! +1 – lifetimes

È possibile utilizzare il selettore di classe jolly css dove esistono più valori di classe?

risposta

Problemi correlati