Warum einen Attributselektor verwenden, um Klassen abzugleichen?

85

Ich habe ein Beispiel für reaktionsschnelle E-Mail-Vorlagen gefunden, bei denen es solche CSS-Selektoren gibt, wie die folgenden:

a[class="btn"]

Warum wird diese Syntax verwendet, wenn sie völlig dieselbe ist wie:

a.btn

Hat es Auswirkungen auf mobile Browser oder irgendetwas anderes?

css css-selectors Ducin
quelle
5
@Jevgeni Bogatyrjov: Das ist eine ganz andere Frage, die nicht einmal mit CSS zu tun hat, aber ich kann sehen, wie verwirrend sie aufgrund des falschen Titels gewesen sein könnte. Ich habe es bearbeitet.
BoltClock

Antworten:

142

Die []Syntax ist eine Attributauswahl .

a[class="btn"]

Dadurch wird ein beliebiges <a>Tag mit ausgewählt class="btn". Es wird jedoch nicht ausgewählt, <a>welche class="btn btn_red"zum Beispiel (wohingegen a.btn). Es stimmt nur genau mit diesem Attribut überein .

Vielleicht möchten Sie die 30 CSS-Selektoren lesen, die Sie sich merken müssen . Es ist für jeden aufstrebenden Webentwickler von unschätzbarem Wert.

Eric
quelle
Aber es hat nichts mit Reaktionsfähigkeit zu tun, es ist reine CSS-Syntax, oder?
Ducin
2
@tkoomzaaskz Richtig.
Eric
Ich bin auch auf dasselbe Tutorial gestoßen ( aignmonitor.com/guides/mobile/coding ) - es scheint seltsam, dass sie diese Technik in einem Tutorial verwenden würden. Tutorials sollten die Dinge für Anfänger so klar wie möglich machen. Besonders wenn der gemeinsame .btnSelektor ausreichen würde. Vermisse ich etwas? Hat das einen Nutzen? Größere Spezifität vermute ich?
Nickspiel
Gibt es nicht eine neue Möglichkeit, alle Klassennamen mit jQuery und Klammern auszuwählen, um an alle Klassen mit demselben Präfix zu gelangen? So etwas wie $ (this) .css ("[class ~ = 'btn_']", "red"); Die Syntax ist möglicherweise falsch, aber wissen Sie, wie die richtige Syntax lautet?
Whyoz
1
Es wäre großartig, wenn Sie Ihre Antwort aktualisieren würden, um auch die anderen Arten von Attributselektoren anzuzeigen. Die Suche nach "CSS-Auswahl-Klammern" wirft diese Frage bei einer Suche auf, und es ist schwierig, nach den anderen Variationen zu suchen ("CSS-Auswahl-Klammern").
Cimmanon