Eine kurze Einführung in CSS-Selektoren
Vorwort: Dies ist das eigene Verständnis und die Organisation des Autors nach dem Studium. Wenn es Fehler oder Fragen gibt, korrigieren Sie diese bitte und ich werde weiterhin aktualisieren!
Selektorgewicht
Wenn das Selektorgewicht durch 4 Ziffern dargestellt wird, dann:
Das Gewicht des Elementselektors beträgt 1; das Gewicht des
id-Selektors beträgt 100; Das Gewicht des Klassenselektors
beträgt 10; das Gewicht des Inline-Stils (JS arbeitet auch im Inline-Stil) beträgt 1000 ;
-
Natürlich, wenn ein bestimmter Attribut
-Wert gesetzt ist! Wichtig, es ist immer noch das Wichtigste, direkt zu töten
: Wildcard-Selektor, *{...}, Sternchen stellt einen Wildcard-Selektor dar, der mit jedem Element übereinstimmen kann; >Elementselektor, html{...}, body{...}, p{...}, das Element des Dokuments ist der grundlegendste Selektor, Elementselektor ;
id selector, #value, setze ein id-Attribut auf das Element, der Wert ist value
class class selector, .value {...}, Legen Sie ein Klassenattribut für das Element fest. Der Wert lautet
- Attributauswahl Es gibt viele Möglichkeiten, Elemente auszuwählen:
Einfacher Attributselektor: img[title], holen Sie sich das img-Element mit dem Alt-Attributsatz; Holen Sie sich das Element, dessen ID Wrapper ist und das Attribut Wrapper hat;
Spezifischer Attributselektor: input[type="button"], holen Sie sich das Eingabeelement des Attributwerts button[; outter= „abc“], holen Sie sich das Element, dessen ID Wrapper ist und dessen Wert des Attributs „outer“ abc ist. Teilattributselektor: p[class ^="a" ], ruft das p-Element ab, dessen Klassenattributwert mit a beginnt; p[class $="b"], ruft das p-Element ab, dessen Klassenattributwert mit b endet; >
- Group
Selektor, trennen Sie die zu gruppierenden Selektoren durch Kommas; #wrapper, #content{...}, erhalten Sie das Element mit der ID von Wrapper und das Element mit der ID des Inhalts, zwei Holen Sie sich alle;
- Nachkommen-Selektor , trennen Sie die zu gruppierenden Selektoren durch Leerzeichen, #wrapper #content{...}, im Element mit der ID des Wrappers. Rufen Sie innerhalb des
- -Objekts
das Element mit der ID des Inhalts ab, das ein untergeordnetes Element oder ein untergeordnetes Element sein kann 🎜> untergeordneter Elementselektor
, trennen Sie die zu gruppierenden Selektoren mit einem Größer-als-Zeichen, #wrapper > #content{...}, innerhalb des Elementobjekts mit der ID des Wrappers, die
- ; Untergeordnete Elementselektoren und Nachkommenselektoren sind nicht identisch,
- Nachkommenselektoren umfassen untergeordnete Elementselektoren und Nachkommenselektoren werden fortgesetzt um nach unten zu suchen Selektor für Geschwisterelemente:
-
Selektor für benachbarte Geschwister (IE6 und die folgenden werden nicht unterstützt), trennen Sie die zu gruppierenden Selektoren durch ein Pluszeichen, .wrapper + .content{...}, nachdem Sie das Element mit Klassen-Wrapper, das nächste Element mit Klasseninhalt und Der Unterschied zwischen dem universellen Geschwisterselektor
besteht darin, dass der angrenzende Geschwisterselektor nur das aktuelle Element und dann das - -Element abruft, das auf
folgt. Selbst wenn es später dasselbe Element gibt, kann dies nicht der Fall sein selected; Universeller Geschwisterselektor (nicht unterstützt von IE7 und niedriger), trennen Sie die zu gruppierenden Selektoren mit Tilden, .wrapper ~ .content{...}, get class Nachdem ein Wrapper-Element ist, unterscheiden sich alle -Elemente mit Klasseninhalt von den benachbarten Geschwisterselektoren
Pseudoklassen--Selektor (nicht unterstützt von IE8 und niedriger):
:root wählt das Stammelement des Dokuments aus, also das HTML-Element;
input:focus, das aktuelle Eingabefeld erhält den Fokus;
- Element
- p:nth-; of-type(n), Die Auswahl ist das n-te
p-Element seines übergeordneten Elements. Dies ist berechnetes n in der Reihenfolge des p Elemente innerhalb des übergeordneten Elements. Dann ist get; n eine Ganzzahl und beginnt bei 1, es kann auch eine Formel sein, oder es können die Schlüsselwörter gerade (gerade Zahl), ungerade (ungerade) sein number);
- p
:first-of-type, wählt das erste p-Element seines übergeordneten Elements aus, was den gleichen Effekt hat wie p:nth-of -type(1);
- p
:last-of-type, die Auswahl ist das letzte p-Element seines übergeordneten Elements. Beachten Sie, dass es kein n-tes gibt vor;
- p:nth-last -of-type(n), die Auswahl ist das n-te p-Element seines übergeordneten Elements, aber
zählt ab dem letzten untergeordneten Element vorwärts , beachten Sie, dass es n-tes davor gibt;
- p:nth-child(n), die Auswahl ist das n-te
untergeordnete Element seines übergeordneten Elements, und es muss ein p-Element sein, dies ist entsprechend dem übergeordneten Element. Berechnen Sie die Reihenfolge der -Unterelemente innerhalb des Elements n und prüfen Sie dann, ob Das n-te Unterelement ist ein p-Element. Dies führt dazu, dass das n-te Unterelement möglicherweise nicht p ist und dann nicht erhalten werden kann. Daher ist es besser, das n-te Unterelement zu verwenden. of-type(n);
- p
- p:last-child, wählt das letzte Element seines übergeordneten Elements aus, und es ist ein p-Element;
p:nth-last-child(n), die Auswahl ist das n-te untergeordnete Element seines übergeordneten Elements und es muss ein p-Element sein, aber
zählt vom letzten Unterelement vorwärts , Beachten Sie, dass das n-te vorne steht. Es gibt viele andere...
- Pseudoelementselektor:
- , gibt den Stil des ersten Buchstabens eines Elements an. Auf alle
- führenden Satzzeichen sollte dieser Stil angewendet werden mit dem ersten Buchstaben
und kann nur mit Elementen auf Blockebene verknüpft werden :first-line
, legt fest Der Stil der ersten Textzeile im Element kann nur mit Elementen auf Blockebene :after verknüpft werden von IE7 und niedriger, fügen Sie den generierten Inhalt am Anfang des Elements ein
- ::selection, passend zum vom Benutzer ausgewählten Teil;
unterstützt nur das Doppelpunktschreiben , unterstützt nur sowohl Farb- als auch Hintergrundfarbstile
;
Das obige ist der detaillierte Inhalt vonEine kurze Einführung in CSS-Selektoren. 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

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

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











Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
