Erben von CSS -Eigenschaften: Eine Spezifität Enigma

Bei der Anwendung von CSS -Regeln auf Webelemente spielt das Konzept der Spezifität eine wichtige Rolle bei der Ermittlung, welche Regel Vorgehen nimmt. Die Behandlung ererbter Eigenschaften in diesem Zusammenhang wirft jedoch häufig Fragen auf.

Ereritierte Stile sind Eigenschaften, die von einem übergeordneten Element an seine Nachkommen weitergegeben wurden. Es ist vernünftig zu fragen, wie die Spezifität ererbter Eigenschaften mit der von direkt gerichteten Regeln verglichen wird. Stattdessen ersetzt die Spezifität einer CSS -Deklaration, die auf das Element abzielt, jede ererbte Eigenschaft direkt.

. All_red_text {color: rot; } In diesem Fall erben die H2 -Elemente innerhalb des .all_red_text div das Standard -Browser -Verhalten, schwarz zu sein. Die Farbe: rot; Eigenschaft in .all_red_text überschreibt diesen geerbten Stil, und der Text erscheint rot.

, wenn wir jedoch eine Regel hinzufügen, die direkt auf das H2 -Element abzielt, wie unten gesehen:

h2 {color: schwarz; } .All_red_text {color: rot; } In diesem überarbeiteten Beispiel die Farbe: schwarz; Regel für H2-Elemente hat Vorrang vor der ererbten Eigenschaft, was dazu führt, dass alle H2-Text schwarz sind. Die Spezifität einer direkt gerichteten Regel hat immer eine höhere Priorität, unabhängig davon, ob die ererbte Eigenschaft von einem übergeordneten Element oder dem Benutzeragenten stammt. Das Verständnis dieses Verhaltens ist wichtig, um unerwartete Ergebnisse bei der Arbeit mit ererbten Stilen in CSS zu vermeiden.