Inhaltsverzeichnis
Selektorgewicht
Heim Web-Frontend CSS-Tutorial Eine kurze Einführung in CSS-Selektoren

Eine kurze Einführung in CSS-Selektoren

Apr 13, 2017 am 10:30 AM

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:

CSS-Selektor

Einführung

: 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; >
  1. 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;

  2. Nachkommen-Selektor
  3. , trennen Sie die zu gruppierenden Selektoren durch Leerzeichen, #wrapper #content{...}, im Element mit der ID des Wrappers. Rufen Sie innerhalb des
  4. -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,
  5. die
Untergeordnete Elemente, nur eine Ebene tiefer suchen
    ; 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

  1. :root wählt das Stammelement des Dokuments aus, also das HTML-Element;

  2. input:focus, das aktuelle Eingabefeld erhält den Fokus;

  3. Element

    :hover, die Maus schwebt über dem aktuellen Element

  4. 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);

  5. 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);

  6. p

    :last-of-type, die Auswahl ist das letzte p-Element seines übergeordneten Elements. Beachten Sie, dass es kein n-tes gibt vor;

  7. 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;

  8. 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);

  9. p

    :first-child, die Auswahl ist ihr übergeordnetes Element. Das erste Element von und ist ein p-Element, genau wie p :nth-child(1);

  10. 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
  11. , Beachten Sie, dass das n-te vorne steht.
  12. Es gibt viele andere...

  13. Pseudoelementselektor:
:first-letter
    , gibt den Stil des ersten Buchstabens eines Elements an. Auf alle
  1. 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
  2. :after verknüpft werden von IE7 und niedriger, fügen Sie den generierten Inhalt am Anfang des Elements ein

  3. :before, nicht unterstützt von IE7 und niedriger, am Anfang des Elementinhalt: Fügen Sie schließlich den generierten Inhalt ein;

  4. ::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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

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

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial
1662
14
PHP-Tutorial
1261
29
C#-Tutorial
1234
24
So verwenden Sie Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

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.

HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch Apr 12, 2025 am 12:02 AM

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

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

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.

So fügen Sie Bilder auf Bootstrap ein So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

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.

So schreiben Sie geteilte Zeilen auf Bootstrap So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

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.

So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

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.

So ändern Sie Bootstrap So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

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

So verwenden Sie die Bootstrap -Taste So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

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

See all articles