Po co używać selektora atrybutu do dopasowywania klas?

85

Znalazłem przykład responsywnych szablonów wiadomości e-mail, w których są takie selektory CSS, jak następujące:

a[class="btn"]

Dlaczego używana jest ta składnia, jeśli jest całkowicie taka sama jak:

a.btn

Czy ma to jakiś wpływ na przeglądarki mobilne lub cokolwiek innego?

css css-selectors ducin
źródło
5
@Jevgeni Bogatyrjov: To zupełnie inne pytanie, które nie jest nawet związane z CSS, ale widzę, że mogło to być mylące z powodu niewłaściwego tytułu. Edytowałem to.
BoltClock

Odpowiedzi:

142

[]Składnia jest selektor atrybutu .

a[class="btn"]

Spowoduje to wybranie dowolnego <a>tagu z class="btn". Jednak na przykład nie wybierze, <a>który ma class="btn btn_red"(podczas gdy a.btntak). Dokładnie pasuje tylko do tego atrybutu.

Możesz przeczytać 30 selektorów CSS, które musisz zapamiętać . Jest nieoceniony dla każdego początkującego programisty internetowego.

Eric
źródło
ale nie ma to nic wspólnego z responsywnością, to czysta składnia CSS, prawda?
Ducin
2
@tkoomzaaskz Correct.
Eric
Natknąłem się również na ten sam samouczek ( campaignmonitor.com/guides/mobile/coding ) - wydaje się dziwne, że użyliby tej techniki w samouczku. Samouczki powinny jak najbardziej wyjaśniać sytuację dla początkujących. Zwłaszcza, gdy .btnwystarczyłby zwykły selektor. Czy coś mi brakuje? Czy jest z tego jakaś korzyść? Zgaduję, że większa specyficzność?
nickspiel
czy nie ma nowego sposobu na wybranie wszystkich nazw klas za pomocą jQuery i nawiasów, aby uzyskać wszystkie klasy z tym samym prefiksem? Coś w rodzaju $ (this) .css ("[class ~ = 'btn_']", "czerwony"); Składnia może być nieprawidłowa, ale czy wiesz, jaka jest prawidłowa składnia?
whyoz
1
Byłoby wspaniale, gdybyś zaktualizował swoją odpowiedź, aby pokazać również inne typy selektorów atrybutów. Wyszukiwanie wyrażenia „css selector square nawiasach kwadratowych” wywołuje to pytanie w wyszukiwaniu i trudno jest znaleźć inne warianty („css selektor kwadratowych nawiasów kwadratowych gwiazda”).
cimmanon