Heim >Web-Frontend >CSS-Tutorial >Von CSS abgeleitete Selektoren
[Einführung] Mit abgeleiteten Selektoren können Sie das Markup präziser gestalten, indem Sie Stile basierend auf dem Kontext der Position eines Elements definieren. In CSS1 werden Selektoren, die Regeln auf diese Weise anwenden, als kontextbezogene Selektoren bezeichnet, da sie auf den Kontext angewiesen sind, um auf
abgeleitete Selektoren
Sie können das Markup prägnanter gestalten, indem Sie Stile basierend auf definieren der Kontext der Position eines Elements.
In CSS1 werden Selektoren, die Regeln auf diese Weise anwenden, als kontextuelle Selektoren bezeichnet, da sie auf den Kontext angewiesen sind, um eine Regel anzuwenden oder zu vermeiden. In CSS2 werden sie abgeleitete Selektoren genannt, aber egal wie Sie sie nennen, sie bewirken dasselbe.
Mit abgeleiteten Selektoren können Sie ein Tag basierend auf dem Kontext des Dokuments formatieren. Durch die sinnvolle Verwendung abgeleiteter Selektoren können wir unseren HTML-Code sauberer gestalten.
Wenn Sie beispielsweise möchten, dass das starke Element in der Liste kursiv statt wie üblich fett dargestellt wird, können Sie einen abgeleiteten Selektor wie folgt definieren:
li strong {
Schriftart -style: kursiv;
Schriftstärke: normal;
}
Bitte beachten Sie den Kontext des mit gekennzeichneten blauen Codes:
< ;p> ;Ich bin fett und nicht kursiv geschrieben, weil ich nicht in der Liste bin, daher funktioniert diese Regel bei mir nicht
Im obigen Beispiel ist nur das starke Element im li-Element kursiv dargestellt und es besteht keine Notwendigkeit, eine spezielle Klasse zu definieren oder Klasse für das starke Element id, der Code ist prägnanter.
Sehen Sie sich die folgenden CSS-Regeln an:
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
Farbe: blau;
}
Hier ist der HTML-Code, den es betrifft:
Das stark hervorgehobene Wort hier Absatz istrot.
Das obige ist der detaillierte Inhalt vonVon CSS abgeleitete Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!