Ich frage mich, welcher Selektor besser ist und warum?
Beispiel-HTML-Code
%Vor% und wir möchten .product mit CSS Selektoren erreichen:
.product .main .category .product div.main div.category div.product Ich vergleiche sie mit den folgenden Kriterien:
Wir können annehmen, dass .product auf der ganzen Seite eindeutig ist. Wir können ID anstelle von Klasse verwenden, aber in diesem Fall haben wir das Klassenattribut gewählt.
Wir können annehmen, dass
.productauf der ganzen Seite eindeutig ist.
Leistungsmäßig wäre best natürlich ein ID-Selektor gewesen, aber da Sie stattdessen eine Klasse verwenden, würde .product an zweiter Stelle stehen.
Was Wartbarkeit, Lesbarkeit und Semantik betrifft (es gibt auch etwas mehr Leistung) ...
.product bedeutet
Suchen Sie nach Elementen mit der Klasse
product.
Sehr einfach zu verstehen, fast identisch mit einem ID-Selektor, wenn Sie dies auf der Grundlage der obigen Annahme verwenden.
Ich denke, der einzige Unterschied zwischen der Verwendung eines Klassenselektors und eines ID-Selektors in diesem Fall besteht darin, dass ein ID-Selektor die Eindeutigkeit dieses Elements erzwingt, und nicht nur, weil passiert , um ein solches Element zu sein . Mit anderen Worten, ein ID-Selektor wirkt auf das Wissen ein, dass ein Dokument nur ein solches eindeutiges Element hat, während ein Klassenselektor dies nicht tut.
.main .category .product bedeutet
Finde alle Elemente, die eine Klasse
product
haben die in allen Elementen enthalten sind, die eine Klassecategory
haben die in allen Elementen enthalten sind, die eine Klassemainhaben.
Browser haben die Aufgabe, die Abstammung dieser Elemente zu überprüfen, was überflüssig ist, wenn Sie nur ein .product haben. Viele Browser-Layout-Engines bewerten CSS-Selektoren von rechts nach links , ähnlich wie ich den Selektor wie oben auf Englisch übersetzt habe.
div.main div.category div.product bedeutet
Finde nur
<div>Elemente, die eine Klasseproduct
haben die nur in<div>-Elementen enthalten sind, die eine Klassecategory
haben die nur in<div>-Elementen enthalten sind, die eine Klassemainhaben.
Wenn Sie die Hierarchie der Elemente überprüfen, erwarten Sie außerdem, dass ein Browser nur ein div mit der Klasse product vergleicht. Wenn Sie beliebiges -Element dieser Klasse zuordnen möchten, funktioniert dieser Selektor nicht wie vorgesehen.
Wenn Sie sicher sind, dass Sie nur genau ein div mit dieser Klasse haben und Sie nur diesem Element entsprechen wollen, dann könnten Sie stattdessen div.product verwenden, aber .product funktioniert immer noch etwas besser.
Ich bin kein Guru, aber ich kann zumindest etwas dazu sagen.
Ich denke, der erste Weg ist einfach der beste:
Ich versuche immer, den kleinsten auswählbaren Selektor zu verwenden, also würde ich einfach .product verwenden (d. h. dein erstes Beispiel). Ich denke, das hat auch Leistungsvorteile, da der Browser nur Elemente finden muss, die mit dieser einzelnen Klasse markiert sind, anstatt zuerst nach einem übereinstimmenden Elternteil zu suchen und dann herauszufinden, ob ein Nachkomme mit dieser Klasse markiert ist. p>
Der einzige Grund, warum ich die anderen Methoden, die Sie erwähnen, verwenden muss, ist:
.internal_link -Klasse) fett schreiben wollte, aber wollte, dass sie auch unterstrichen werden, wenn sie in einem bestimmten Kontext auftraten. Wenn Sie schließlich davon ausgehen, dass nur ein Element mit der Klasse .product markiert wird, verwenden Sie es wahrscheinlich besser als ID und nicht als Klasse.
Alle drei Selektoren haben unterschiedliche Bedeutungen und sollten je nach Bedarf an verschiedenen Orten verwendet werden. Leistungsmäßig sollte das erste das Beste sein, weil wir nur einmal das DOM fahren müssen. Lesbarkeitsweisen scheinen auch der zweite und der dritte Selektor schwerfällig und könnten in der Zukunft schwer zu erweitern sein.
.product.main .category .productdiv.main div.category div.product
Die oben genannten Selektoren hängen davon ab, wie kompliziert Ihre Site ist.
Beispiel
Wenn alle diese Elemente verwendet werden nur Einsen. Der erste Selektor kann passen.
Der zweite Weg ist Best Practice, wenn Sie dies für mehrere Seiten verwenden (z. B. Sie haben diese Elemente für eine Reihe von Produkten).
Der dritte Weg für mich ist unnötig, es sei denn, Sie haben diesen Klassennamen in anderen HTML-Tags wie span.
Weitere Tipps: Mushu Tricks
Tags und Links css css-selectors