Perché utilizzare un selettore di attributi per abbinare le classi?

Ho trovato un esempio di modelli di email reattivi in cui sono presenti selettori CSS come i seguenti:

a[class="btn"]

Perché viene utilizzata questa sintassi se è totalmente uguale a:

a.btn

Ha qualche impatto sui browser mobili o altro?

css css-selectors

— ducin
fonte

@Jevgeni Bogatyrjov: Questa è una domanda completamente diversa che non è nemmeno correlata ai CSS, ma posso vedere come potrebbe essere stata fonte di confusione a causa del titolo errato. L'ho modificato.

— BoltClock

144

La []sintassi è un selettore di attributi .

a[class="btn"]

Questo selezionerà qualsiasi <a>tag con class="btn". Tuttavia, non selezionerà <a>quale ha class="btn btn_red", ad esempio (mentre lo a.btnfarebbe). Corrisponde solo esattamente a quell'attributo .

Puoi leggere I 30 selettori CSS che devi memorizzare . È inestimabile per qualsiasi sviluppatore web emergente.

— Eric
fonte

ma non ha nulla a che fare con la reattività, è pura sintassi CSS, giusto?

— ducin

Mi sono anche imbattuto nello stesso tutorial ( campaignmonitor.com/guides/mobile/coding ) - sembra strano che usassero questa tecnica in un tutorial. I tutorial dovrebbero rendere le cose più chiare possibile per le persone che iniziano. Soprattutto quando il .btnselettore comune sarebbe sufficiente. Mi manca qualcosa? C'è qualche vantaggio in questo? Maggiore specificità immagino?

— nickspiel

non c'è un nuovo modo per selezionare tutti i nomi delle classi usando jQuery e parentesi per ottenere tutte le classi con lo stesso prefisso? Qualcosa come $ (this) .css ("[class ~ = 'btn_']", "red"); La sintassi potrebbe essere sbagliata, ma sai qual è la sintassi corretta?

— whyoz

@whyoz penso che tu stia cercando [class^='btn_'].

— Eric,

Sarebbe fantastico se aggiornassi la tua risposta per mostrare anche gli altri tipi di selettori di attributi. La ricerca di "parentesi quadre del selettore css" porta in primo piano questa domanda in una ricerca, ed è difficile cercare le altre varianti ("stella parentesi quadre del selettore css").

— cimmanon