Heim >Web-Frontend >CSS-Tutorial >Einführung in CSS-Selektoren
Einführung in CSS-Selektoren
- DDDOriginal
- 2025-01-22 00:13:10366Durchsuche
<p>Diese Lektion befasst sich mit der Verbesserung von HTML-Visuals mithilfe von Cascading Style Sheets (CSS). Wir beginnen mit CSS-Selektoren – den Tools zum Targeting bestimmter HTML-Elemente.
<p>Cascading Style Sheets (CSS)
<p>CSS bestimmt das Aussehen von HTML-Komponenten: Farbe, Abstand, Größe und mehr. Während Sie einzelne Elemente mithilfe von Inline-
<p>HTML-Elemente auswählen
<p>Das 
<p>Von zu komplexen Kombinatorkombinationen wird abgeraten. Sie können sie mit Klassenselektoren kombinieren (z. B.
style-Attributen (z. B. <p style="color:red;">) formatieren können, ist dies für große Websites ineffizient.
<p>Ein effektiverer Ansatz besteht darin, ein <style>-Element im <head>-Abschnitt Ihres HTML-Codes oder eine separate CSS-Datei (wie style.css) zu verwenden, die mit <link>: mit Ihrem HTML-Code verknüpft ist
<code class="language-html"> <style>
p {
color: red;
text-decoration: underline;
}
</style></code>
<p>oder
<code class="language-html"><!-- index.html --> <link href="style.css" rel="stylesheet"></code>
<code class="language-css">/* style.css */
p {
color: red;
text-decoration: underline;
}</code>
<p>Dadurch wird auf alle <p>-Elemente derselbe Stil angewendet. Mit Browser-Entwicklertools (z. B. Rechtsklick, „Inspizieren“ in Chrome) können Sie angewendete Stile zur Fehlerbehebung überprüfen und ändern.
<p>HTML-Elemente auswählen
<p>Das p in p { color: red; } wählt alle <p>-Elemente aus. Bei komplexeren Strukturen bieten die Attribute id und class eine feinere Kontrolle.
<p>Klassen- und ID-Selektoren
<p>Jedes Element kann ein einzigartiges id haben. ID-Selektoren (#idName) zielen auf Elemente anhand ihres id ab. Allerdings müssen ids eindeutig sein, was ihre Flexibilität einschränkt.
<p>Kurse bieten eine größere Vielseitigkeit. Mehrere Elemente können dieselbe Klasse teilen. Klassenselektoren (.className) zielen auf Elemente mit dieser Klasse. Elemente können mehrere Klassen haben (z. B. <p class="red-text bold">).
<p>.red-text { color: red; } formatiert alle Elemente mit der Klasse red-text. p.red-text formatiert speziell nur <p> Elemente mit red-text.
<p>Kombinatorselektoren
<p>Das Document Object Model (DOM) stellt die Struktur der Seite als Baum dar. Kombinatorselektoren nutzen diese Hierarchie.
-
div p: Wählt alle<p>-Elemente innerhalb von<div>-Elementen (Nachkommen) aus. -
div > p: Wählt nur die direkten untergeordneten<p>-Elemente von<div>-Elementen aus. -
p span: Wählt das<span>aus, das unmittelbar auf ein<p>folgt. -
p ~ span: Wählt alle<span>-Geschwister aus, die einem<p>folgen.
<p>Von zu komplexen Kombinatorkombinationen wird abgeraten. Sie können sie mit Klassenselektoren kombinieren (z. B. .intro p).
<p>Pseudoselektoren
<p>Pseudoklassenselektoren formatieren Elemente basierend auf ihrem Status (z. B. a:hover, a:active, a:visited). Pseudoelementselektoren zielen auf Teile eines Elements ab (z. B. ::first-letter).
<p>Andere Selektoren
-
*: Der universelle Selektor, der alle Elemente auswählt. - Gruppenselektoren (z. B.
h1, h2, p): Wählen Sie mehrere Elementtypen aus. - Attributselektoren (z. B.
p[lang],p[lang="en"]): Wählen Sie Elemente basierend auf Attributen aus.
- Responsives Design
- Responsive Bilder
- CSS-Animationen
Das obige ist der detaillierte Inhalt vonEinführung in CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
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
Vorheriger Artikel：So verbergen Sie die WordPress-AdministratorleisteNächster Artikel：So verbergen Sie die WordPress-Administratorleiste