Web-Frontend
CSS-Tutorial
Was ist ein CSS-Selektor? Zusammenfassung der grundlegenden CSS-Selektoren (neun Typen)
Was ist ein CSS-Selektor? Zusammenfassung der grundlegenden CSS-Selektoren (neun Typen)
Was ist ein CSS-Selektor? Der CSS-Selektor gibt das Tag an, auf das CSS reagieren soll, und der Name dieses Tags ist der Selektor. Bedeutung: Welchen Container soll man wählen? Elemente in HTML-Seiten werden über CSS-Selektoren gesteuert. Was sind also die CSS-Selektoren? Werfen wir einen Blick auf die häufig verwendeten CSS-Selektoren
1: CSS-Wildcard-Selektor
Der Wildcard-Selektor wird durch ein Sternchen (*) dargestellt, zum Beispiel:
*{
font-size : 12px;
}bedeutet, dass die Schriftgröße aller Elemente 12px beträgt;
2: CSS-Gruppenselektor
Wenn mehrere Elemente die gleichen Stilattribute haben, können Sie In einer Anweisung zusammengefasst werden die Elemente durch Kommas getrennt. Beispiel:
p, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}Durch die Verwendung des Gruppenselektors können Elemente mit mehreren identischen Attributen zur Auswahl zusammengeführt und gruppiert werden, was die Codierungseffizienz erheblich verbessert reduziert auch die Größe von CSS-Dateien.
3: CSS-Tag-Selektor
Eine vollständige HTML-Seite besteht aus vielen verschiedenen Tags, und der Tag-Selektor bestimmt, welche Tags den entsprechenden CSS-Stil verwenden, zum Beispiel:
p{
color: red;
}Dieser Code macht alle p-Tags rot
4: CSS-Klassenselektor
Klasse Der Selektor zielt auf jedes Element mit dem angegebenen Klassennamen in ab Das Klassenattribut beginnt mit einem „.“-Symbol:
.info {
color:black;
}Dies ändert die Farbe aller Elemente mit der Klassennameninformation
5:CSS-ID-Selektor
Der ID-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind; der ID-Selektor beginnt mit einem „#“-Symbol. Zum Beispiel:
#demop{
color:#000;
}Dies bedeutet, dass die Schriftfarbe des Elements mit id demop auf Schwarz gesetzt wird.
6: CSS-Pseudoklassenselektor
Manchmal ist es notwendig, den Stil eines Elements unter Verwendung anderer Bedingungen als des Dokuments anzuwenden, z. B. Mauszeiger usw . Zu diesem Zeitpunkt müssen wir Pseudoklassen verwenden. Im Folgenden finden Sie die Pseudoklassendefinition für die verknüpfte Anwendung. Beispiel:
a:link{
color:green ;
font-size: 50px
}
a:hover{
color:pink;
font-size: 50px
}
a:active{
color:yellow;
font-size: 50px
}
a:visited{
color:red;
font-size: 50px
} Wirkung:
Wenn Sie die Webseite öffnen, ist die Beschriftung grün.
Wenn Sie mit der Maus auf die Beschriftung fahren, ist die Beschriftung rosa Auf dem Etikett ist die Beschriftung gelb.
Der Nachkommenselektor wird verwendet Wählen Sie die Nachkommen eines bestimmten Elements oder einer bestimmten Elementgruppe aus. Die Auswahl des übergeordneten Elements wird zuerst platziert, und die Auswahl des untergeordneten Elements wird am Ende platziert, getrennt durch ein Leerzeichen. Der Nachkommen-Selektor kann mehr als nur zwei Elemente enthalten. Bei mehrstufigen Vorfahren-Nachkommen-Beziehungen kann es mehrere Leerzeichen geben, um sie zu trennen. Wenn es beispielsweise drei Elemente mit den IDs a, b und c gibt, ist der Nachkomme derselbe Selektor kann geschrieben werden als #a In der Form #b #c{}, solange die Auswahl der Vorfahrenelemente durch Leerzeichen vor und in der Mitte der Nachkommenelemente getrennt ist. Beispiel:
#people em{
color: red;
}Diese Regel setzt die Farbe aller em-Elemente, die in Elementen mit dem ID-Wert „people“ enthalten sind, auf Rot.
8: CSS-Kombinationsselektorkann in Kombination mit zwei oder mehr Selektortypen verwendet werden; zum Beispiel:
p.info {
color:blue;
}Es werden nur Absätze ausgewählt Andere Elemente, die zu dieser Klasse gehören, und andere Absätze, die nicht zur Info-Klasse gehören, werden ignoriert.
9: CSS-AttributselektorFormat: Basisselektor [attribute = 'attribute value']{ }, Sie können auch einfach Attribute schreiben, zum Beispiel:
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
input[type = 'text'] {background-color: red}
input[type = 'password'] {background-color: pink}
</style>
</head>
<body>
<form>
name:<input type = "text"><br/>
pass:<input type = "password">
</form>
</body>
</html>Ergebnisse ausführen:
!important >ID-Auswahl-Selektor> Klasse| Attributauswahl> Tag> Vererbung> Browser-Standardattribut Berechnung der CSS-Selektorgewichtung:
| !important | Infinity | Interline-Stil | 1000 | ||||||||
| ID-Selektor | 100 | ||||||||||
| Class|Attribute|Pseudo-Klassenselektor | 10 | ||||||||||
|
Tag-Selektor Platzhalterauswahl
|
10 |
Konvertieren Sie alle Selektoren in jeder Zeile in diese Werte und addieren Sie sie. Je größer das Ergebnis, desto höher die Priorität!
Empfohlene verwandte Artikel:
CSS-Klasse Selektoren und ID-Selektoren
Verwandte Kursempfehlungen:
Grundlegendes Video-Tutorial für den Einstieg in CSS3
Das obige ist der detaillierte Inhalt vonWas ist ein CSS-Selektor? Zusammenfassung der grundlegenden CSS-Selektoren (neun Typen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
So ändern Sie die Größe eines HTML-Textfelds
Feb 20, 2024 am 10:03 AM
Das Festlegen der Größe von HTML-Textfeldern ist ein sehr häufiger Vorgang in der Frontend-Entwicklung. In diesem Artikel wird erläutert, wie Sie die Größe eines Textfelds festlegen, und es werden spezifische Codebeispiele bereitgestellt. In HTML können Sie CSS verwenden, um die Größe eines Textfelds festzulegen. Der spezifische Code lautet wie folgt: input[type="text"
So passen Sie ein WordPress-Theme an, um eine falsch ausgerichtete Anzeige zu vermeiden
Mar 05, 2024 pm 02:03 PM
Um WordPress-Themes anzupassen, um eine fehlerhafte Anzeige zu vermeiden, sind spezifische Codebeispiele erforderlich. Als leistungsstarkes CMS-System wird WordPress von vielen Website-Entwicklern und Webmastern geliebt. Wenn Sie jedoch WordPress zum Erstellen einer Website verwenden, stoßen Sie häufig auf das Problem einer falschen Ausrichtung des Themes, was sich auf das Benutzererlebnis und die Schönheit der Seite auswirkt. Daher ist es sehr wichtig, Ihr WordPress-Theme richtig anzupassen, um eine falsch ausgerichtete Anzeige zu vermeiden. In diesem Artikel wird erläutert, wie Sie das Thema anhand spezifischer Codebeispiele anpassen.
Was sind die Elemente im ausgeschlossenen Abschnitt des CSS-Selektors?
Apr 06, 2024 am 02:42 AM
Der :not()-Selektor kann unter bestimmten Bedingungen zum Ausschließen von Elementen verwendet werden und seine Syntax lautet :not(selector) {Stilregel}. Beispiele: :not(p) schließt alle Nicht-Absatzelemente aus, li:not(.active) schließt inaktive Listenelemente aus, :not(table) schließt Nicht-Tabellenelemente aus, div:not([data-role="primary"] ) Schließen Sie div-Elemente mit nicht primären Rollen aus.
Was ist die CSS-Selektorpriorität?
Apr 25, 2024 pm 05:30 PM
Die CSS-Selektorpriorität wird in der folgenden Reihenfolge bestimmt: Spezifität (ID > Klasse > Typ > Platzhalter) Quellreihenfolge (Inline > Internes Stylesheet > Externes Stylesheet > Benutzeragenten-Stylesheet) Deklarationsreihenfolge (neueste Deklarationen haben Vorrang) Wichtigkeit (!important erzwingt eine Erhöhung der Priorität)
CSS-Selektoren, bei denen es sich um erweiterte Selektoren handelt
Oct 07, 2023 pm 02:59 PM
Zu den erweiterten Selektoren in CSS-Selektoren gehören Nachkommenselektoren, Selektoren für untergeordnete Elemente, Selektoren für benachbarte Geschwister, universelle Geschwisterselektoren, Attributselektoren, Klassenselektoren, ID-Selektoren, Pseudoklassenselektoren und Pseudoelementselektoren. Detaillierte Einführung: 1. Der Nachkommenselektor verwendet einen durch Leerzeichen getrennten Selektor, um die Nachkommenelemente eines Elements auszuwählen. 2. Der Unterelementselektor verwendet einen durch ein Größer-als-Zeichen getrennten Selektor, um die direkten Unterelemente eines Elements auszuwählen. Benachbarte gleichgeordnete Selektoren verwenden Selektoren, die durch ein Pluszeichen getrennt sind, um das erste gleichgeordnete Element auszuwählen, das unmittelbar auf ein Element folgt, und so weiter.
Was genau bedeutet H5 -Seitenproduktion?
Apr 06, 2025 am 07:18 AM
Die Produktion von H5-Seiten bezieht sich auf die Erstellung von plattformübergreifenden kompatiblen Webseiten unter Verwendung von Technologien wie HTML5, CSS3 und JavaScript. Sein Kern liegt im Parsingcode des Browsers, der Struktur-, Stil- und interaktive Funktionen macht. Zu den allgemeinen Technologien gehören Animationseffekte, reaktionsschnelles Design und Dateninteraktion. Um Fehler zu vermeiden, sollten Entwickler debuggen werden. Leistungsoptimierung und Best Practices umfassen Bildformatoptimierung, Anforderungsreduzierung und Codespezifikationen usw., um die Ladegeschwindigkeit und die Codequalität zu verbessern.
Erhalten Sie ein tiefes Verständnis für die Gewichtung und Priorität von CSS-Selektor-Platzhaltern
Dec 26, 2023 pm 01:36 PM
Detailliertes Verständnis der Gewichtung und Priorität von CSS-Selektor-Platzhaltern. In CSS-Stylesheets sind Selektoren ein wichtiges Werkzeug zum Angeben, auf welche HTML-Elemente der Stil angewendet wird. Die Priorität und Gewichtung des Selektors bestimmen, welcher Stil angewendet wird, wenn mehrere Regeln gleichzeitig auf ein HTML-Element angewendet werden. Platzhalterselektoren sind ein häufiger Selektor in CSS. Es wird durch das Symbol „*“ dargestellt, was bedeutet, dass es mit allen HTML-Elementen übereinstimmt. Platzhalterselektoren sind einfach, können aber in bestimmten Situationen sehr nützlich sein. Allerdings auch das Gewicht und die Priorität von Wildcard-Selektoren
Lernen Sie die grundlegende Syntax der Verwendung von CSS-Selektoren kennen
Jan 13, 2024 am 11:44 AM
Um die grundlegende CSS-Selektorsyntax zu beherrschen, sind spezifische Codebeispiele erforderlich. CSS-Selektoren sind ein sehr wichtiger Bestandteil der Frontend-Entwicklung. Sie können zum Auswählen und Ändern verschiedener Elemente von HTML-Dokumenten verwendet werden. Die Beherrschung der grundlegenden CSS-Selektorsyntax ist für das Schreiben effizienter Stylesheets von entscheidender Bedeutung. In diesem Artikel werden einige gängige CSS-Selektoren und entsprechende Codebeispiele vorgestellt. Elementselektor Der Elementselektor ist der einfachste Selektor, der das entsprechende Element anhand seines Tag-Namens auswählen kann. Um beispielsweise alle Absätze (p-Elemente) auszuwählen, können Sie verwenden
