Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Übersicht über gängige CSS-Selektorklassifizierungen

PHPz
Freigeben: 2024-01-13 14:40:16
Original
1152 Leute haben es durchsucht

Übersicht über gängige CSS-Selektorklassifizierungen

Allgemeine CSS-Selektorklassifizierung und spezifische Codebeispiele

Der CSS-Selektor ist ein Tool, mit dem Elemente von HTML-Dokumenten ausgewählt und ihnen bestimmte Stile zugewiesen werden. Die Beherrschung der verschiedenen Arten von CSS-Selektoren ist für das Schreiben effizienter CSS-Stylesheets von entscheidender Bedeutung. Im Folgenden finden Sie gängige CSS-Selektorkategorien und spezifische Codebeispiele.

  1. Elementselektor
    Der Elementselektor ist der gebräuchlichste CSS-Selektor. Es wählt Elemente aus, indem es ihre Tag-Namen auswählt. Um beispielsweise alle Absatzelemente auszuwählen, können Sie den folgenden Stil verwenden:
p {
  color: blue;
}
Nach dem Login kopieren
  1. Klassenselektor (Klassenselektor)
    Der Klassenselektor fügt das Klassenattribut zum HTML-Element hinzu und verwendet einen Punkt, um es zu identifizieren. Dadurch kann derselbe Stil auf mehrere Elemente im Dokument angewendet werden. Beispiele sind wie folgt:
.button {
  background-color: red;
}
Nach dem Login kopieren

So verwenden Sie es in HTML:

<button class="button">Click me</button>
Nach dem Login kopieren
  1. ID-Selektor (ID-Selektor)
    Der ID-Selektor fügt dem HTML-Element das ID-Attribut hinzu und verwendet das Nummernzeichen, um es zu identifizieren. Es eignet sich für Situationen, in denen nur einem Element ein bestimmter Stil zugewiesen werden muss. Das Codebeispiel lautet wie folgt: So verwenden Sie
#header {
  background-color: yellow;
}
Nach dem Login kopieren

in HTML:

<header id="header">This is the header</header>
Nach dem Login kopieren
  1. Untergeordneter Selektor (Untergeordneter Selektor)
    Der untergeordnete Selektor kann die direkten untergeordneten Elemente eines Elements auswählen. Es wird durch das Größer-als-Zeichen (>) identifiziert. Der folgende Code wählt die direkte untergeordnete Elementspanne aller Absatzelemente aus und setzt die Schriftfarbe auf Rot:
p > span {
  color: red;
}
Nach dem Login kopieren
<p>This is a <span>red</span> text.</p>
Nach dem Login kopieren
  1. Descendant Selector (Descendant Selector)
    Der Descendant Selector kann alle Nachkommenelemente eines Elements auswählen. Die Darstellung erfolgt durch Leerzeichen. Der folgende Code wählt die Span-Elemente innerhalb aller Absatzelemente aus und setzt die Hintergrundfarbe auf Grau:
p span {
  background-color: gray;
}
Nach dem Login kopieren
<p>This is a <span>gray</span> text.</p>
Nach dem Login kopieren
  1. Adjacent Sibling Selector (Adjacent Sibling Selector)
    Der Adjacent Sibling Selector kann das gleichgeordnete Element direkt hinter einem Element auswählen. Es ist mit einem Pluszeichen (+) gekennzeichnet. Der folgende Code wählt die p-Elemente aus, die unmittelbar auf alle h2-Elemente folgen, und setzt die Schriftfarbe auf Blau:
h2 + p {
  color: blue;
}
Nach dem Login kopieren
<h2>Heading 2</h2>
<p>This paragraph is immediately following the h2 element.</p>
Nach dem Login kopieren
  1. Universal Selector (Universal Selector)
    Der Universal Selector kann alle Elemente im HTML-Dokument auswählen. Es wird durch ein Sternchen (*) dargestellt. Der folgende Code wählt alle Elemente auf der Seite aus und legt den Rand auf 1 Pixel fest:
* {
  border: 1px solid black;
}
Nach dem Login kopieren

Die oben genannten sind gängige CSS-Auswahlkategorien und ihre Beispielcodes. Wenn Sie die verschiedenen Arten von Selektoren und deren Verwendung verstehen, können Sie beim Schreiben von CSS-Stylesheets flexibler und präziser vorgehen. Beachten Sie, dass das Kombinieren und Verschachteln von Selektoren auch mit CSS-Selektoren für eine spezifischere Elementauswahl und Stildefinition möglich ist.

Das obige ist der detaillierte Inhalt vonÜbersicht über gängige CSS-Selektorklassifizierungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage