1. Typselektor Was ist ein Typselektor? Bezieht sich auf das Zeilenzeichen, das den vorhandenen Tag-Typ auf der Webseite als Namen übernimmt. Body ist ein Tag-Typ auf einer Webseite, einschließlich div, p und span.
Wie folgt:
Körper {}
div {}
P{}
Spanne {}
2. Gruppenauswahl
Für XHMTL-Objekte kann derselbe Stil gleichzeitig einer Gruppe zugewiesen werden.
Die Selektoren werden durch Kommas getrennt. Der Vorteil dieser Schreibweise besteht darin, dass derselbe Stil nur einmal geschrieben werden muss, was die Codemenge reduziert und die CSS-Codestruktur verbessert.
Bitte beachten Sie bei der Verwendung, dass sich „Komma“ im Halbbreitenmodus und nicht im chinesischen Vollbreitenmodus befindet.
Wie folgt:
h1,h2,h6,p,span
{
Schriftgröße:12px;
Farbe:#FF0000;
Schriftfamilie: Arial;
}
3. Enthalten Selektoren zum Angeben von Stilen für Unterobjekte in einem Objekt, sodass die Auswahlmethode eine Rolle spielt.
Es ist zu beachten, dass diese Stileinstellung nur für Unterobjektbeschriftungen dieses Objekts gilt. Diese Stileinstellung gilt nicht für andere Unterobjekte, die alleine existieren oder sich außerhalb dieses Objekts befinden.
Dies hat den Vorteil, dass wir übermäßige ID- und Klasseneinstellungen vermeiden und die erforderlichen Elemente direkt definieren können.
Wie folgt:
h2-Spanne
{
Farbe: rot;
}
wie folgt:
Körper h1 Spannweite stark
{
Schriftstärke:fett;
}
4. Der ID-Selektor ist
ein Selektor, der auf dem Prinzip des DOM-Dokumentobjektmodells basiert. Für eine XHTML-Datei kann jedem Tag ein Name in Form einer ID zugewiesen werden eine XHTML-Datei. Die ID ist eindeutig und kann nicht wiederholt werden.
In einer Div-CSS-Layout-Webseite können Sie sie für verschiedene Zwecke benennen, z. B. Kopfzeile für den Kopf und Fußzeile für den unteren Teil.
Das XHTML lautet wie folgt:
#content
{
Schriftgröße:14px;
Zeilenhöhe: 120 %;
}
5. Klassenselektor
Tatsächlich ist id eine Erweiterung von XHTML-Tags und class ist eine Kombination aus mehreren SHTML-Tags. Die wörtliche Übersetzung von class bedeutet Klasse oder Kategorie.
Für XHTML-Tags verwenden Sie class="" zur Namenszuweisung. Im Gegensatz zu IDs können Klassen mehrere Elemente mit demselben Stil direkt als Klasse definiert werden.
Die Vorteile der Verwendung von Klassen liegen auf der Hand. Sie spiegeln die Wiederverwendbarkeit von CSS-Code wider. Viele Tags können mithilfe eines Stils definiert werden, ohne für jeden einen Stilcode zu schreiben.
Das XHTML lautet wie folgt:
.he
{
Rand: 10 Pixel;
Hintergrundfarbe:rot;
}
6. Tag-spezifische Selektoren
Wenn Sie id und class gleichzeitig verwenden möchten und gleichzeitig auch Tag-Selektoren verwenden möchten, können Sie die folgende Methode verwenden:
h1#content {}
/*Stellt alle h1-Tags mit der ID als Inhalt dar*/
h1.p1 {}
/*Gibt alle h1-Tags mit der Klasse p1 an*/
Die Genauigkeit des labelspezifischen Selektors liegt zwischen dem Label-Selektor und dem ID-/Klassen-Selektor und ist einer der am häufigsten verwendeten Selektoren.
7. Kombinationsselektoren
Verwenden Sie alle oben genannten Selektoren in Kombination. Wie folgt:
h1 .p1 {}
/*Gibt alle Tags mit der Klasse p1 unter h1 an*/
#content h1 {}
Stellt alle h1-Tags unter dem Tag mit ID-Inhalt dar
h1 .p1,#content h1 {}
/*Stellt alle h1-Tags unter h1 mit der Klasse p1 und alle h1-Tags unter dem Tag mit der ID content dar*/
h1#content h2{}
/*h2-Tag unter h1-Tag mit ID als Inhalt*/
CSS-Selektoren sind sehr frei und flexibel. Sie können je nach den Anforderungen der Seite verschiedene Selektoren verwenden, um die CSS-Datei so weit wie möglich zu strukturieren und zu optimieren.