Mehrere Selektoren in CSS

CSS (Cascading Style Sheets) ist eine Stilsprache, die zur Steuerung des Stils und Layouts von HTML- und XML-Dateien verwendet wird. In CSS bezieht sich ein Selektor auf ein Muster, das zum Auswählen von HTML-Elementen verwendet wird. Selektoren sind eine der grundlegendsten Komponenten von CSS, die verschiedene Stile auf verschiedene Elemente anwenden können, um Webseiten zu verschönern und zu optimieren.

Es gibt viele Arten von Selektoren in CSS, jeder mit unterschiedlichen Funktionen und Anwendungsszenarien. In diesem Artikel stellen wir mehrere gängige CSS-Selektoren vor, um den Lesern zu helfen, die Grundlagen von CSS besser zu beherrschen.

1. Tag-Selektor

Tag-Selektor bezieht sich auf die Auswahl des Namens des HTML-Elements als Selektor, um beispielsweise alle Absätze auszuwählen, wir kann p als Selektor verwenden:

p {
  color: red;
  font-size: 16px;
}

Der obige Code setzt die Schriftfarbe aller Absätze auf Rot und die Schriftgröße auf 16 Pixel. Tag-Selektoren eignen sich hervorragend für Situationen, in denen Sie auf alle Elemente desselben Typs auf einer Webseite denselben Stil anwenden müssen.

2. Klassenselektor

Der Klassenselektor bezieht sich auf die Verwendung eines Punkts (.) als Präfix, gefolgt vom angegebenen Klassennamen als Auswahl Zum Beispiel:

.button {
  background-color: blue;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}

Der obige Code setzt die Hintergrundfarbe aller Elemente mit der Klasse „button“ auf Blau, die Schriftfarbe auf Weiß und die abgerundeten Ecken des Rahmens usw. Klassenselektoren werden häufig verwendet, um eine Gruppe von Elementen mit einem gemeinsamen Stil anzugeben.

3. ID-Selektor

Der ID-Selektor verwendet ein #-Zeichen als Präfix, gefolgt vom angegebenen ID-Namen als Selektor, zum Beispiel:

#header {
  background-color: gray;
  color: white;
  height: 100px;
}

Der obige Code setzt die Hintergrundfarbe des Elements mit der ID „header“ auf Grau, die Schriftfarbe auf Weiß und die Höhe des Elements auf 100 Pixel. Der ID-Selektor kann nur zur Angabe eines bestimmten Elements verwendet werden, da die ID jedes Elements in HTML eindeutig ist.

4. Attributselektor

Attributselektor bezieht sich auf die Verwendung des Attributnamens und des Attributwerts in eckigen Klammern als Selektor, zum Beispiel: # 🎜 🎜#

a[href="https://www.google.com"] {
  color: blue;
  text-decoration: none;
}

Der obige Code setzt die Farbe aller Hyperlink-Elemente mit dem href-Attribut „https://www.google.com“ auf Blau und entfernt die Unterstreichung. Attributselektoren können verwendet werden, um Elemente genauer auszuwählen und Stile basierend auf den Attributwerten des Elements zu definieren.

Descendant Selector

Descendant Selector bezieht sich auf einen Selektor, der durch Angabe der hierarchischen Beziehung zwischen Elementen auswählt. Wenn wir beispielsweise das p-Element innerhalb eines div-Elements auswählen möchten, können wir den folgenden Code verwenden:

div p {
  font-style: italic;
}

Der obige Code setzt alle p-Elemente innerhalb des div-Elements auf Kursivschrift. Nachkommenselektoren können auch verwendet werden, um bestimmte Elemente innerhalb verschachtelter Strukturen auszuwählen.

Untergeordneter Selektor

Ein untergeordneter Selektor bezieht sich auf einen Selektor, der alle direkten untergeordneten Elemente auswählt, die die Bedingungen erfüllen, d. h. „übergeordnetes Element>.“ ; untergeordnetes Element“-Format. Wenn wir beispielsweise das direkte untergeordnete Element ul in allen div-Elementen mit der Klasse „menu“ auswählen möchten, können wir den folgenden Code verwenden:

div.menu > ul {
  padding-left: 0;
}

Der obige Code wählt alle div-Elemente mit der Klasse „ aus. menu" Der linke Rand (padding-left) des direkten untergeordneten Elements ul in wird auf 0 gesetzt. Untergeordnete Selektoren haben eine ähnliche Funktionalität wie untergeordnete Selektoren, gelten jedoch nur für direkte untergeordnete Elemente.

Die oben genannten sind mehrere gängige Selektoren in CSS. Verschiedene Selektoren können je nach Bedarf unterschiedliche Elementstile auswählen und anwenden. Wir hoffen, dass die Leser durch das Verständnis dieser Selektoren die Grundkenntnisse von CSS besser beherrschen können, um schöne und stabile Webseiten zu schreiben.

Das obige ist der detaillierte Inhalt vonMehrere Selektoren in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!