Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Die richtige Art, CSS-Selektoren zu verwenden

WBOY
Freigeben: 2024-01-13 10:38:06
Original
1046 Leute haben es durchsucht

Die richtige Art, CSS-Selektoren zu verwenden

So verwenden Sie CSS-Selektoren richtig

CSS-Selektoren (Cascading Style Sheets) sind ein wichtiges Werkzeug zum Auswählen und Anwenden von Stilen auf HTML-Elemente. Durch die richtige Verwendung von CSS-Selektoren können unsere Webseitenstile präziser und flexibler gestaltet werden. Im Folgenden wird die korrekte Verwendung von CSS-Selektoren ausführlich erläutert und konkrete Codebeispiele bereitgestellt.

1. Basisselektor

  1. Elementselektor: Wenden Sie Stile an, indem Sie den Tag-Namen eines HTML-Elements auswählen. Um beispielsweise die Schriftfarbe für alle Absatzelemente (p) auf Rot festzulegen:
p {
  color: red;
}
Nach dem Login kopieren
  1. Klassenselektor: Wenden Sie den Stil an, indem Sie den Klassennamen des HTML-Elements auswählen. Klassenselektoren beginnen mit einem Punkt (.), gefolgt vom Klassennamen. Um beispielsweise die Hintergrundfarbe für alle Elemente mit dem Klassennamen „intro“ auf Gelb zu setzen:
.intro {
  background-color: yellow;
}
Nach dem Login kopieren
  1. ID-Selektor: Wenden Sie den Stil an, indem Sie die ID des HTML-Elements auswählen. Der ID-Selektor beginnt mit einem Nummernzeichen (#), gefolgt vom ID-Namen. Um beispielsweise die Breite für das Element mit dem ID-Namen „Logo“ auf 200 Pixel festzulegen:
#logo {
  width: 200px;
}
Nach dem Login kopieren

2. Kombinationsselektor

  1. Untergeordneter Selektor: Wenden Sie Stile an, indem Sie die untergeordneten Elemente des Elements auswählen. Unterselektoren verwenden das Größer-als-Zeichen (>). Um beispielsweise die Schriftgröße für alle p-Elemente unter dem Artikelelement auf 14 Pixel festzulegen:
article > p {
  font-size: 14px;
}
Nach dem Login kopieren
  1. Nachkommenselektor: Wenden Sie Stile an, indem Sie die Nachkommenelemente des Elements auswählen. Nachkommenselektoren verwenden Leerzeichen. Um beispielsweise die Schriftfarbe für alle p-Elemente unter der übergeordneten Elementklasse „Abschnitt“ auf Grün festzulegen:
.section p {
  color: green;
}
Nach dem Login kopieren
  1. Selektor für benachbarte Geschwister: Wird durch Auswahl der an den Elementstil angrenzenden Geschwisterelemente angewendet. Der benachbarte Geschwisterselektor verwendet das Pluszeichen (+). Um beispielsweise die Schriftart fett für alle p-Elemente festzulegen, die nach der ID „header“ erscheinen:
#header + p {
  font-weight: bold;
}
Nach dem Login kopieren
  1. Allgemeine Geschwisterauswahl: Wenden Sie den Stil an, indem Sie alle Elemente auswählen, die Geschwister des Elements sind. Der universelle Geschwisterselektor verwendet die Tilde (~). Um beispielsweise den Rahmen für alle div-Elemente, die nach der ID erscheinen, auf eine durchgezogene 1-Pixel-Linie zu setzen, lautet „sidebar“:
#sidebar ~ div {
  border: 1px solid;
}
Nach dem Login kopieren

3. Attributselektor

  1. [attribute] Attributselektor: durch Auswahl von Elementen mit angegebenen Attribute anwenden. Um beispielsweise eine Textdekorationsunterstreichung für alle a-Elemente mit dem href-Attribut festzulegen:
a[href] {
  text-decoration: underline;
}
Nach dem Login kopieren
  1. [attribute=value] Attributselektor: Wendet den Stil an, indem Elemente mit dem angegebenen Attribut und Attributwert ausgewählt werden. Um beispielsweise die Schriftfarbe für alle Elemente, deren Zielattributwert „_blank“ ist, auf Blau zu setzen:
a[target="_blank"] {
  color: blue;
}
Nach dem Login kopieren
  1. [attribute^=value] Attributselektor: Durch Auswahl der Elemente mit Attributwerten, die mit dem angegebenen beginnen Wertelement, auf das Stile angewendet werden sollen. Um beispielsweise die Schriftfarbe für alle a-Elemente, deren href-Attributwerte mit „http“ beginnen, auf Rot zu setzen:
a[href^="http"] {
  color: red;
}
Nach dem Login kopieren

4. Pseudoklassenselektor

Pseudoklassenselektor kann den speziellen Status oder die Position von auswählen das Element. Zu den gängigen Pseudoklassenselektoren gehören:hover, :active, :focus usw., die zur Auswahl von Elementen verwendet werden, die sich im Status „Mouseover“, „Aktiviert“, „Fokus“ usw. befinden. Hier sind einige gängige Pseudo-Selektor-Beispiele:

  1. :hover-Pseudo-Selektor: Wählt den Zustand aus, wenn die Maus über dem Element schwebt. Um beispielsweise die Farbe bei Mouseover für alle Links zu ändern:
a:hover {
  color: purple;
}
Nach dem Login kopieren
  1. :nth-child(n) Pseudoklassenselektor: Wählt das n-te untergeordnete Element eines Elements aus. Zum Beispiel, um die Hintergrundfarbe für Elemente in geraden Zeilen in der Liste festzulegen:
li:nth-child(even) {
  background-color: lightgray;
}
Nach dem Login kopieren

Das Obige sind einige grundlegende Verwendungszwecke und Beispiele von CSS-Selektoren. Ich hoffe, dass es den Lesern helfen kann, CSS-Selektoren besser zu verstehen und anzuwenden, um präzise und flexible Ergebnisse zu erzielen Stile steuern und so mehr Möglichkeiten für das Webdesign bieten.

Das obige ist der detaillierte Inhalt vonDie richtige Art, CSS-Selektoren zu verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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