Wenn ich die CSS-Spezifizität einer Regel erhöhen möchte, tendiere ich dazu, html voranzukommen, aber ich frage mich, ob es dazu noch präzisere Möglichkeiten gibt?
(Es mag wie ein triviales Problem erscheinen, aber im Verlauf meiner Stylesheets, die ein reaktives Raster definieren, würde die Verringerung des Spezifitätspräfixes um ein einzelnes Zeichen ein paar hundert Byte einsparen)
Das hängt wirklich davon ab, was Sie erreichen wollen. Ein billiger Weg, die Spezifität zu erhöhen, besteht darin, einfach einen Selektor zu wiederholen. Zum Beispiel, wenn dies Ihr Markup war:
%Vor%Und das war dein CSS:
%Vor% Sie können den class oder id Selektor einfach wiederholen, ohne Ihr Markup zu ändern:
Dies ist vollständig gültig, wie die W3C Selector Level 3-Empfehlung in ihrem Abschnitt Berechnungsspezifität angibt :
Hinweis: Wiederholte Vorkommnisse desselben einfachen Selektors sind erlaubt und erhöhen die Spezifität.
Es scheint mir für Selektoren, in den meisten Fällen können Sie nicht kürzer als zwei Zeichen plus den Raum, vor allem wenn wir sprechen über eine "globale" Verwendung der Zugabe von Spezifität (das scheint der Fall seit Sie verwenden %Code%). Um also CSS zu sparen, benötigen Sie eine einzelne Zeichen-ID in html . Ich würde sagen, eine ID (und nicht eine Klasse), wie Sie es einzigartig halten möchten. Du implementierst das also so in html:
Dies ermöglicht dann die kürzestmögliche Selektoraddition im CSS von:
%Vor%Dann, mit dem, was James Donnelly gesagt hat (was ich übrigens nie über die Wiederholung desselben Selektors wusste), könnte man immer mehr Spezifität mit der geringsten Anzahl von Zeichen wie folgt hinzufügen:
%Vor%Haftungsausschluss
Wenn ich so antworte, empfehle ich nicht, dass dies notwendigerweise ein guter Weg ist, um CSS zu machen, oder ein guter Weg, mit Spezifitätsfragen umzugehen. Aber ich glaube, dass das Hinzufügen der kurzen Ein-Zeichen-ID zum Element html die kleinste Menge an Bytes ist, die man verwenden könnte, um die Spezifität eines Selektors zu erhöhen, was die Frage hier beantwortet.
Tags und Links html optimization css css-selectors css-specificity