HTML
%Vor%CSS
%Vor% Die angewendete Farbe ist blau. Warum ist das? Ich dachte, da .container mehr Spezifität hat als p , würde die Farbe am Ende rot sein.
Was passiert hier? Warum ist es blau?
Meine Hypothese ist, dass der Prozess ist "Hat p irgendwelche Selektoren? Wenn ja, benutze es und suche nicht nach .container . Wenn es keine Stile hätte, würde es nachschlagen und verwenden der Stil für .container . "
denken Sie an die CSS in diesem speziellen Fall als Ziel Bullen Auge. Sie beginnen mit dem spezifischsten Zeiger auf Ihr fragliches Element.
In Ihrem obigen Beispiel ist es der p Selektor, da der Text innerhalb des p -Tag-Wrappers liegt. dann gehst du nach draußen (der Ring direkt vor dem Bullenauge, wenn du willst) ist .container div . Da das Ziel p dem Text, den Sie einfärben möchten, am nächsten ist, erbt es das CSS (Farbtext blau).
im folgenden Beispiel:
Sie sehen, dass der Text "ich sollte rot sein ...." hat nicht unbedingt ein "Bullenauge" css, so dass es einen Ring draußen geht und .container sieht und ihm die Farbe Rot zugewiesen wird.
========
Beantworten Sie jetzt Ihre Frage zur Spezifität
Spezifität gilt für einen Fall wie das folgende Beispiel:
Im obigen Beispiel sehen Sie, dass make .makeMeBlue css hat, um die Farbe des Textes blau zu machen. Die zweite Textfarbe .makeMeBlue div ist jedoch rot. Dies liegt daran, dass wir genauer auf das zweite Element abzielen. Wir haben den Selektor .makeMeBlue.actuallyMakeMeRed verwendet, indem wir beide Klassen des Elements verwenden, um zu sagen: "Dies ist das Element, auf das ich gezielt abzielen möchte, und diesem CSS zuweisen".
Also anstatt das Element wie "Entwickler sind blau, okay, ich werde blau" sieht es "hey, jemand sagte nur alle Entwickler, die" jason "genannt werden, sind rot, und mein Name ist Jason und ich bin ein Entwickler - es ist spezifischer für mich, also werde ich rot sein. "
Ich hoffe, dass die Spezifität etwas deutlicher erklärt wurde.
Tags und Links css