Ich habe einen CSS-Navigations-Header erstellt, und er funktioniert genau so, wie ich es in Bezug auf Positionierung, Stilisierung, all das möchte. Dies ist das CSS, das es stilisiert:
%Vor%Und das ist die Liste:
%Vor%Ziemlich einfaches Zeug (und derzeit auf Ссылка zu sehen, aber ich habe den Code hier für potentielle zukünftige Leser eingefügt).
>Sie können feststellen, dass in der Liste dem endgültigen li eine ID zugewiesen ist. Wenn ich diese Regel dem CSS hinzufüge:
%Vor%Nichts passiert. Es war mein Verständnis, dass A. CSS-Regeln, die später im CSS-Dokument kommen, Vorrang vor den Regeln haben, die früher kommen, und B. CSS-Regeln, die mit dem ID-Selektor verwendet wurden, hatten die höchste Priorität. Aber offensichtlich hat die blaue Farbgebung, die aus den früheren CSS-Regeln kommt, immer noch Vorrang vor der Färbung des endgültigen li Grüns. Ich habe versucht, dafür zu sorgen, dass ich meine Due Diligence für die Lösung googelt, aber alles, was ich finde, sagt, dass IDs die höchste Priorität haben (und dies war auch mein Verständnis in der Praxis für alles, was ich vor diesem einen Thema kodiert habe). p>
Wenn Sie versuchen, einen Selektor zu überschreiben, der nicht hat, haben Sie eine ID mit einer ID, die hat , Ihre Verwirrung wäre genau richtig.
In diesem Fall verwenden Sie #get_started (mit einer ID), um #header ul li a zu überschreiben, das auch eine ID enthält / p>
Sicher denken Sie, dass Ihre ID spezifischer ist als die #header ID - und Sie liegen nicht ganz falsch - aber so funktioniert CSS nicht. Es interessiert nur die Anzahl der im Selektor verwendeten IDs und nicht die Elemente, auf die diese IDs zielen.
Um herauszufinden, welcher von zwei Selektoren Vorrang hat, zählen Sie zuerst die IDs in jedem. Wenn einer mehr IDs hat als der andere, gewinnt er und du bist fertig.
Wenn es die gleiche Nummer ist (in diesem Fall haben beide eine), fahren Sie mit der Anzahl der Klassen fort. Nochmal, wenn man mehr Klassen als die andere hat, gewinnt es und du bist fertig. In diesem Fall haben beide Klassen null.
Also gehen wir weiter zur Anzahl der Tag-Namen. Noch einmal, wenn einer mehr Tag-Namen hat, gewinnt er. Und hier enthält #header ul li a drei Tags ( ul , li und a ), während #get_started keines hat. Du verlierst. Der vorhandene Selektor gewinnt.
Du könntest das mit #header #get_started umgehen, das jetzt zwei IDs hat, aber ich würde es besser als
#header ul li a hat eine höhere Spezifität als #get_started
Sie sollten die w3c-Spezifikationen zu Spezifität lesen.
BEARBEITEN, um hinzuzufügen:
Denken Sie daran, dass, obwohl die Spezifität gewöhnlich in Kurzform als 10er-Potenz geschrieben wird, 10 Elemente nie spezifischer als eine Klasse sein werden und 10 Klassen niemals spezifischer als eine ID sein werden.
E.X.
html body div table tbody tr td ul li a ist weniger spezifisch als .some-link-class
Tags und Links css css-selectors