Heim >Web-Frontend >CSS-Tutorial >Beherrschen von CSSelectors: Eine vollständige Anleitung mit Beispielen
Beherrschen von CSSelectors: Eine vollständige Anleitung mit Beispielen
- 王林Original
- 2024-09-07 00:00:27801Durchsuche
Einführung
In diesem Artikel sprechen wir über CSS3-Selektoren, ein wirklich leistungsstarkes Tool für alle, die mehr erreichen und dabei weniger schreiben möchten. Egal, ob Sie gerade erst anfangen oder Ihre Fähigkeiten auffrischen, dieser Leitfaden führt Sie von den Grundlagen bis zu den fortgeschrittenen Dingen.
Sind Sie bereit, Ihre CSS-Kenntnisse zu verbessern? Fangen wir an!
Grundlegende CSS3-Selektoren
Selektoren sind die Werkzeuge, mit denen wir bestimmte Elemente aus dem HTML-Baum auswählen. Grundlegende CSS3-Selektoren sind, wie der Name schon sagt, die grundlegenden, die jeder Entwickler in seinem Toolkit haben sollte. Dazu gehören Type , Class , ID , Universal und Attribute Selektoren. Lassen Sie uns tiefer in jedes davon eintauchen.
Typselektoren
Diese Selektoren zielen auf HTML-Elemente basierend auf ihrem Tag-Namen ab. Zum Beispiel: p { color: blue; } formatiert alle Absatzelemente in Blau.
Klassenselektoren
Diese Selektoren zielen auf HTML-Elemente basierend auf ihrem Klassenattribut ab. Zum Beispiel: .alert { color: red; } formatiert alle Elemente mit der Klasse „alert“ in Rot.
ID-Selektoren
Diese Selektoren zielen auf ein eindeutiges Element ab, das das spezifische ID-Attribut hat. Beispiel: #navbar { background-color: black; } formatiert das Element mit der ID „navbar“ mit einem schwarzen Hintergrund.
Universelle Selektoren
Diese Selektoren zielen auf alle Elemente auf einer Seite ab. Zum Beispiel * { margin: 0; } entfernt den Rand von allen Elementen auf der Seite.
Attributselektoren
Diese Selektoren zielen auf Elemente basierend auf ihrem Attribut und Wert ab. Zum Beispiel: a[href="https://google.com"] { color: blue; } wird alle Links, die zu Google führen, blau formatieren.
Kurze Codierungsbeispiele
Typauswahl : h1 { color: green; } färbt alle h1-Header grün.
Typauswahl : p { Schriftgröße: 16px; } wählt alle Absatzelemente aus (
) und stellt deren Schriftgröße auf 16 Pixel ein.
Klassenauswahl : .info { Schriftgröße: 18px; } setzt die Schriftgröße aller Elemente mit der Klasse „info“ auf 18px.
Klassenauswahl : .highlight { Hintergrundfarbe: gelb; } wählt alle Elemente mit der Klasse „highlight“ aus und setzt ihre Hintergrundfarbe auf Gelb.
ID-Auswahl : #footer { padding: 20px; } fügt dem Element mit der ID „footer“ einen Abstand von 20 Pixeln hinzu.
ID-Auswahl: #header { height: 60px; } wählt das Element mit der ID „header“ aus und setzt seine Höhe auf 60 Pixel.
Universal Selector : * { Schriftfamilie: Arial, serifenlos; } setzt die Schriftart aller Elemente auf Arial.
Universal Selector : * { box-sizing: border-box; } wählt alle Elemente auf der Seite aus und setzt ihre Box-Sizing-Eigenschaft auf „border-box“, was Auffüllung und Rand in die Gesamtbreite und -höhe des Elements einbezieht.
Attribute Selector : img[alt] { border: 2px solid black; } fügt allen Bildern, die ein Alt-Attribut haben, einen Rahmen hinzu.
Attributauswahl : input[type="text"] { width: 100%; } – Dadurch werden alle Eingabeelemente mit dem Typ „Text“ ausgewählt und ihre Breite auf 100 % ihres übergeordneten Containers festgelegt.
Pseudoklassenselektoren
Pseudoklassenselektoren sind eine leistungsstarke Funktion in CSS, die es uns ermöglicht, Elemente basierend auf ihrem Status oder ihrer Position in der Dokumentstruktur und nicht auf der Grundlage ihres Typs, Attributs oder ihrer Klasse auszuwählen und zu formatieren. Sie sind maßgeblich an der Erstellung dynamischer und ansprechender Designs beteiligt.
Dynamische Pseudoklassen
Dynamische Pseudoklassen umfassen Stile, die sich je nach Benutzerinteraktion ändern. Zum Beispiel: a:hover { color: red; } ändert die Farbe der Links in Rot, wenn Sie mit der Maus darüber fahren.
Strukturelle Pseudoklassen
Strukturelle Pseudoklassen wählen Elemente basierend auf ihrer Position in der Dokumentstruktur aus. Zum Beispiel: p:first-child {font-weight:bold; } macht den ersten Absatz innerhalb seines enthaltenden Elements fett.
Negations-Pseudoklasse
Die Negations-Pseudoklasse :not() schließt ein bestimmtes Element aus einer Auswahl aus. Zum Beispiel: div:not(.highlight) { background-color: yellow; } ändert die Hintergrundfarbe aller Divs in Gelb, außer denen mit der Klasse „highlight“.
Pseudoklassen eingeben
Eingabe-Pseudoklassen werden verwendet, um Formularelemente basierend auf ihrem Status zu formatieren. Zum Beispiel: input:disabled { opacity: 0.5; } formatiert deaktivierte Eingabefelder mit halber Deckkraft.
Kurze Codierungsbeispiele
Dynamische Pseudoklasse : a:focus { outline: none; } entfernt den Fokusumriss von Links, wenn auf sie geklickt oder über die Tastatur zu ihnen navigiert wird.
Dynamische Pseudoklasse : button:active { background-color: red; } ändert die Hintergrundfarbe einer Schaltfläche in Rot, wenn darauf geklickt wird.
Strukturelle Pseudoklasse : li:last-child { color: red; } färbt das letzte Listenelement in jeder Liste rot.
Strukturelle Pseudoklasse : p:nth-child(2) { color: blue; } wählt den zweiten Absatz innerhalb seines übergeordneten Elements aus und färbt den Text blau.
Negation Pseudo-Class : p:not(.no-border) { border: 1px solid black; } fügt allen Absätzen, die nicht die Klasse „no-border“ haben, einen Rahmen hinzu.
Negation Pseudo-Class : div:not(#exclude) { border: 1px solid green; } fügt allen div-Elementen, die nicht die ID „exclude“ haben, einen Rahmen hinzu.
Pseudoklasse eingeben : input:checked { Hintergrundfarbe: grün; } ändert die Hintergrundfarbe der aktivierten Eingabeelemente in Grün.
Pseudoklasse eingeben: input:valid { border: 2px solid green; } fügt allen gültigen Eingabefeldern basierend auf ihren Validierungsregeln einen grünen Rahmen hinzu.
Pseudoklasse Elemente
Pseudoelementselektoren ermöglichen es uns, bestimmte Teile eines Dokuments zu formatieren. Sie können verwendet werden, um den ersten Buchstaben oder die erste Zeile eines Elements zu formatieren oder Inhalte vor oder nach einem HTML-Element einzufügen.
Vorher und Nachher Pseudoelemente
Mit diesen Pseudoelementen können wir Inhalte vor oder nach dem Inhalt eines Elements einfügen.
Beispiel:
p::before {
content: "Read this - ";
color: red;
}
Dadurch wird „Lesen Sie dies –“ vor dem Inhalt jedes Absatzes eingefügt und rot eingefärbt.
Pseudoelemente des Anfangsbuchstabens und der ersten Zeile
Diese Pseudoelemente werden verwendet, um den ersten Buchstaben oder die erste Zeile eines Textblocks zu formatieren.
Beispiel:
p::first-letter {
font-size: 20px;
color: blue;
}
Dadurch wird der erste Buchstabe jedes Absatzes 20 Pixel groß und blau gefärbt.
Kurze Codierungsbeispiele
p::after { content: "*"; } – Dadurch wird nach jedem Absatz ein Sternchen (*) hinzugefügt.
.warning::before { content: "WARNING: "; Schriftstärke: fett; Farbe: rot; } – Dadurch wird „WARNING:“ vor dem Inhalt von Elementen mit der Klasse „warning“ hinzugefügt. Der Text wird fett und rot sein.
blockquote::first-line { Font-Weight: Bold; } – Dadurch wird die erste Zeile jedes Blockzitats fett dargestellt.
div::first-letter { text-transform:uppercase; } – Dadurch wird der erste Buchstabe jedes Div in einen Großbuchstaben umgewandelt.
h1::after { content: ""; Farbe: grün; } – Dadurch wird nach jedem h1-Element ein grünes Häkchen hinzugefügt.
Codepen-Beispiele
Pseudoelemente und Pseudoklassen sind einige meiner Lieblingsselektoren und um sie wirklich zu verstehen, empfehle ich Ihnen, viel zu üben.
Hier sind ein paar Beispiele für Codepen, mit denen Sie experimentieren können:
Beispiel 1
Tutorial
Beispiel 2
Tutorial
Beispiel 3
Tutorial
Diese Beispiele scheinen einfach zu sein, aber wenn Sie den Code überprüfen, werden Sie feststellen, dass sie mit sehr wenigen Pseudoklassen erstellt wurden!
Kombinator-Selektoren
Kombinatorselektoren in CSS sind eine leistungsstarke Möglichkeit, bestimmte Elemente auszuwählen, die bestimmte Beziehungskriterien mit anderen Elementen erfüllen. Diese Selektoren ermöglichen es uns, Elemente basierend auf ihrer Beziehung im Dokumentbaum anzusprechen, z. B. ob ein Element ein untergeordnetes Element, ein Nachkomme oder ein Geschwisterelement eines anderen Elements ist.
Nachkommenkombinatoren
Ein Nachkommenkombinator wird durch ein Leerzeichen gekennzeichnet. Es wählt Elemente aus, die Nachkommen eines bestimmten Elements sind.
Beispiele:
div p { color: blue;}
Dadurch werden alle
Elemente, die Nachkommen eines
div p { background-color: yellow;}
Dadurch werden alle
Elemente, die Nachkommen eines
Kinderkombinatoren
Ein untergeordneter Kombinator wird mit > gekennzeichnet. Es wählt Elemente aus, die direkte Kinder eines bestimmten Elements sind.
Beispiele:
div > p { color: blue;}
Dadurch werden alle
Elemente, die direkte untergeordnete Elemente eines
div > p { border: 1px solid red;}
This will select all
elements that are direct children of a
Adjacent Sibling Combinators
An adjacent sibling combinator is denoted by +. It selects an element that is directly after another specific element.
Example:
div + p { color: blue;}
This will select any
element that is directly after a
General Sibling Combinators
A general sibling combinator is denoted by ~. It selects elements that are siblings of a certain element.
Example:
div ~ p { color: blue;}
This will select all
elements that are siblings of a
Advanced CSS3 Selectors
Advanced CSS3 selectors provide more precise targeting capabilities than basic selectors. These include attribute selectors with various matchers and nth-child/nth-of-type selectors.
Attribute Selectors with Various Matchers
Attribute selectors can be used with various matchers to select elements based on specific conditions related to their attributes.
Example:
input[type="text"] {
color: blue;
}
This will select all input elements with the type attribute of "text" and color the text blue.
Nth-child and Nth-of-type Selectors
The nth-child and nth-of-type selectors are used to select elements based on their position in the parent element.
Example:
p:nth-child(2) {
color: red;
}
This will select the second child paragraph of its parent element and color the text red.
Short Coding Examples
Attribute Selector with Matcher: a[href^="https"] {font-style: italic;} - This will select all links that have an href attribute that starts with "https" and make the text italic.
Attribute Selector with Matcher: input[type$="text"] {background-color: yellow;} - This will select all input elements that have a type attribute that ends with "text" and give them a yellow background.
Nth-child Selector: li:nth-child(odd) {background-color: grey;} - This will select all odd-numbered list items and give them a grey background.
Nth-of-type Selector: p:nth-of-type(3n) {font-weight: bold;} - This will select every third paragraph and make the text bold.
Best Practices for Using CSS3 Selectors
Use the Right Selector : The key to using CSS3 selectors effectively is to use the right selector for the job. For instance, use class selectors when you want to style a group of elements and ID selectors for unique elements.
Avoid Over-Specification : Over-specifying selectors can make your CSS hard to maintain. Stick to simple selectors as much as possible.
Use Shorthand Properties : Shorthand properties can make your CSS cleaner and easier to read. For example, use margin: 0 auto; instead of margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;.
Group Selectors : If multiple selectors share the same style declaration, group them together to keep your CSS DRY (Don't Repeat Yourself).
Comment Your Code : Commenting your CSS can help you and others understand what your code does, especially when using complex selectors.
Use Pseudo-classes and Pseudo-elements : These can help you target elements based on their state or position in the document, which can make your CSS more dynamic and responsive.
Keep Specificity Low : Overly specific selectors can lead to specificity wars, making it hard to override styles later. Keep your specificity as low as possible.
Test Across Different Browsers : Different browsers can interpret CSS selectors differently. Always test your CSS across different browsers to ensure consistency.
Conclusion
In conclusion, selectors, ranging from basic type, class, and ID selectors to advanced pseudo-classes, pseudo-elements, and combinators, provide a powerful toolset for styling HTML elements. By understanding and applying these selectors, you can create dynamic, responsive, and aesthetically pleasing websites.
However, it's important to follow best practices such as using the right selector for the job, avoiding over-specification, grouping selectors, and testing across different browsers to ensure the maintainability and consistency of your CSS code.
? Hello, I'm Eleftheria, Community Manager, developer, public speaker, and content creator.
? Wenn Ihnen dieser Artikel gefallen hat, denken Sie darüber nach, ihn zu teilen.
? Alle Links | X | LinkedIn
Das obige ist der detaillierte Inhalt vonBeherrschen von CSSelectors: Eine vollständige Anleitung mit Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!