Heim >Web-Frontend >CSS-Tutorial >Von CSS abgeleitete Selektoren

Von CSS abgeleitete Selektoren

巴扎黑
巴扎黑Original
2017-03-18 13:34:001773Durchsuche

[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

  • Meine Worte sind kursiv geschrieben. Dies liegt daran, dass sich das starke Element innerhalb eines Li-Elements befindet.

  • Ich bin eine normale Schriftart.


  • 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.


    Diese Unterüberschrift ist ebenfalls rot.


    Das stark hervorgehobene Wort in dieser Unterüberschrift ist< strong>blue.


    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!

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn