Es gibt vier am häufigsten verwendete Auswahlmethoden,
die Auswahl von ID-Regeln, z. B.
Anführungszeichen für den Inhalt
button#button{}
#urlBar[type="text"] { }
div > p > span#demo{}
Auswahl von Klassenregeln, z. B.
Zitieren von Inhalten
button.toolbarButton { }
.fancyText { }
menuitem > .menu-left[checked="true"] { }
Auswahl von Tag-Regeln, z. B.
Zitieren von Inhalten
td { }
div > p { }
input[ type= "checkbox"] { }
Einheitliche Selektoren, z. B.
Referenzinhalt
*
: nach
[hidden="true"]
Sie beginnen alle mit der Übereinstimmung von ganz rechts bis zum Ende der gesamten Regel ganz links.
Es liegt ein Problem vor: Die Regel ganz rechts kann bereits das Element bestimmen, das Sie auswählen möchten.
Eine stärkere Regelübereinstimmung führt zu einer Leistungsverschwendung.
Zum Beispiel
macht div > p > span#demo{} div > p > span überhaupt keinen Sinn.
Verbesserung:
IDs sind eindeutig. Es besteht keine Notwendigkeit, redundante Regeln hinzuzufügen. Es kann auch genau abgestimmt werden.
Inhalt zitieren
button#button{} -> #button{}
#urlBar[type="text"] { } -> #urlBar{}
div > p > span#demo{} -> #demo{}
Folgendes sollte nicht angezeigt werden <a class="toolbarButton"></a>Damit es auch optimiert werden kann.
Das Zitieren des Inhalts
button.toolbarButton { } -> .toolbarButton{}
verwendet zu viele Regeln. Es ist besser, dem Element direkt eine Klasse zuzuweisen.
Beispielsweise
kann div > p > span > a{} zu einer besonderen Leistung führen. Schreiben Sie einfach direkt eine Klasse.
Besondere Situationen erfordern eine besondere Behandlung.
Manchmal müssen Sie beispielsweise sicherstellen, dass die Seitenstruktur sauber ist. Diese Methode wird verwendet, um den Anforderungen späterer Revisionen gerecht zu werden. Es ist auch möglich. Finden Sie die beste Lösung im Gleichgewicht.
Vererbung verwenden
#demo .left{text-align:left} ->#demo{text-align:left}
Hinweis: Im Originalartikel wird XUL verwendet. Für Schüler, die XUL noch nicht kennengelernt haben, sehen die Tags möglicherweise etwas aus seltsam, aber es ist nicht schwer zu verstehen.