Detaillierte Erklärung komplexer CSS-Selektoren und CSS-Schriftarten und Farbattribute

Ich habe bereits einige grundlegende CSS-Selektoren kennengelernt, aber heute werde ich die komplexen CSS-Selektoren vorstellen. Es gibt drei Arten komplexer Selektoren:

1. Eltern-Kind-Selektor (abgeleitet)

<div Klasse="Wrapper">
        <starke Klasse="Box">
            234
        </strong>
</div>
123

Um 234 zu färben, müssen Sie zu diesem Zeitpunkt den Eltern-Kind-Selektor verwenden. Obwohl der vorherige Tag-Selektor Farbe erzeugen kann, hat 123 auch Farbe, sodass der Eltern-Kind-Selektor für die Eltern-Kind-Beziehung verwendet wird, sodass 234 genau in der Farbe geändert werden kann, ohne 123 zu ändern. Die verwendete Methode ist beispielsweise Eltern-Tag + Leerzeichen + Kind-Tag

div stark em{
    Hintergrundfarbe: rot;
}

Auf diese Weise ist die Hintergrundfarbe der Position 234 rot, aber die Position 123 erfüllt nicht die Eltern-Kind-Beziehung, sodass der Hintergrund von 123 nicht rot wird. (Natürlich müssen zum Verbinden nicht nur Tag-Selektoren verwendet werden. Sie können auch Klassenselektoren verwenden. Dies hängt nur davon ab, ob die Eltern-Kind-Beziehung erfüllt ist, und hat nichts mit dem Verbindungsselektor zu tun.)

2. Direkter untergeordneter Elementselektor

<div>
        123
        <stark>
            456
        </strong>
</div>

Gibt das untergeordnete Element der direkten Beziehung erster Ebene an. Beispielsweise befindet sich 123 hier in einem Em direkt unter dem Div, daher wird dieses Em als direktes untergeordnetes Element des Div bezeichnet. Durch diese Änderung ändert nur 123 die Farbe, während 456 die Farbe nicht ändert. Die verwendete Methode ist

div > em {
Hintergrundfarbe: rot;
}

Verbunden durch ">", bedeutet dies, dass der Inhalt innerhalb des em-Elements geändert wird, das das direkte untergeordnete Element von div ist.

3. Paralleler Selektor

<div>1</div>
<div Klasse="demo"> 2 </div>
<p class="demo"> 3 </p>

Wenn Sie derzeit die Farbe von 2 ändern und die anderen unverändert lassen möchten, ist dies mit Tag-Selektoren oder Attribut-Selektoren nicht möglich (Sie können natürlich ID-Selektoren verwenden). Sie benötigen daher einen parallelen Selektor, der das geänderte Objekt über zwei parallele Elemente findet und es dann ändert. So verwenden Sie es:

div.demo{
    Hintergrundfarbe: rot;
}

Parallele Selektoren (mehrere Auswahlbedingungen zum Auswählen eines Objekts) haben (im Gegensatz zu anderen Elementen) ihre eigene Einzigartigkeit darin, dass zwei oder mehr Auswahlmethoden ohne Leerzeichen miteinander verbunden werden.

]

Bei der Verwendung komplexer Selektoren müssen Sie das Gewichtungsproblem berücksichtigen. Die Gewichtungswerte von Tags in derselben Zeile können direkt addiert werden. Als Nächstes folgen einige einfache Eigenschaften von CSS-Schriftstil und -Farbe.

div{
    font-size:30px; <!--Schriftgröße (Höhe wird geändert)-->
    font-weight:bold; <!--Schriftstärke (strong-Tag kommt mit Font-weight-Attribut) -->
    Schriftstil: kursiv; <!--em-Tag-CSS-Stil--> 
    font-family:arial; <!--Schriftstil-->
    Farbe: grün; <!--Rein englischer Wortstil-->
    Farbe:ff00ff; <!--Farbcode-->
    Farbe:rgb(25,25,25); <!--Farbfunktion-->
}

Die Werte der Schriftattribute finden Sie im Wörterbuch www.css88.com. Farbattribute werden im Allgemeinen nicht in reinen englischen Wörtern geschrieben, da sie restriktiv sind (die Farbe ist, was das Wort ist, es gibt kein Milchweiß, Elfenbeinweiß usw., es ist nur Weiß). Farbcodes und Farbfunktionen sind relativ flexibel und können in großem Umfang geändert werden. Der Künstler stellt unserem Front-End den Wert hinter der Farbfunktion zur Verfügung und die RGB-Farbtabelle kann online durchsucht werden.

Heute werde ich diese beiden Arten von CSS-Codes vorstellen. Die gerade bereitgestellte Website ist für uns Front-End-Lernende sehr hilfreich. Sie können direkt darauf klicken. Die anderen werden später geschrieben. Bitte verzeihen Sie mir, wenn sie nicht gut geschrieben sind!

Zusammenfassen

Oben sind die vom Editor eingeführten CSS-Komplexselektoren und CSS-Schriftstil- und Farbattribute. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!