Implementierung neuer Probleme mit CSS3-Selektoren

Grundlegende Selektorerweiterungen

1. Untergeordneter Elementselektor

:tomato: #wrap > .inner {color: pink;} Dies wird auch als direkter Nachkommenselektor bezeichnet. Dieser Selektortyp kann nur mit direkten Nachkommen übereinstimmen, nicht mit tiefen Nachkommenelementen. Zusammenfassung: > wirkt auf die erste Generation von Nachkommen eines Elements, und Leerzeichen wirken auf alle Nachkommen eines Elements.

2. Selektor für benachbarte Geschwister

:tomato: #wrap #first + .inner {color: #f00;} Es wird nur mit dem folgenden Geschwisterelement abgeglichen

3. Universeller Geschwisterselektor

:tomato: #wrap #first ~ div { border: 1px solid;} Es wird mit dem zweiten Element übereinstimmen, vorausgesetzt, dass es (nicht notwendigerweise unmittelbar) dem ersten Element folgen muss und sie ein gemeinsames übergeordnetes Element haben. Alle Geschwisterelemente

4. Selektorgruppierung

:tomato: h1,h2,h3{color: pink;} Das Komma wird hier als verbindendes Zeichen bezeichnet.

Attributselektoren

1. Teilstring-Wert-Attribut-Selektor

:tomato: [attr|=val]: Wählt Elemente aus, deren attr-Attributwert val (einschließlich val) ist oder mit val- beginnt.

:tomato: [attr^=val]: Wählt Elemente aus, deren Attr-Attributwert mit val beginnt (einschließlich val).

:tomato: [attr$=val]: Wählt Elemente aus, deren Attr-Attributwert mit val endet (einschließlich val).

:tomato: [attr*=val]: Wählt Elemente aus, deren Attributwert „attr“ die Zeichenfolge „val“ enthält. Einige Browser unterstützen die Teilzeichenfolgenauswahl von Elementen.

2. Existenz- und Wertattributselektoren

:tomato: [attr]: Dieser Selektor wählt alle Elemente aus, die das attr-Attribut enthalten, unabhängig vom Wert von attr. [attr=val]: Dieser Selektor wählt nur die Elemente aus, deren attr-Attribut der Wert val zugewiesen ist.

:tomato: [attr~=val]: stellt ein Element mit einem Attribut namens attr dar, das eine durch Leerzeichen getrennte Liste von Werten ist, von denen mindestens einer val ist. Beispielsweise eine Klasse innerhalb mehrerer durch Leerzeichen getrennter Klassen. Beispiel: name="atguigu_llc atguigu"

:tomato: [name =val]: Dieser Selektor wählt nur die Elemente aus, deren Namensattribut der Wert val zugewiesen ist.

Pseudoklassen- und Pseudoelement-Selektoren

1. Link-Pseudoklasse

:tomato: :link repräsentiert alle Anker, die Hyperlinks sind und auf eine nicht besuchte Adresse verweisen

:tomato: :visited repräsentiert alle Anker, die Hyperlinks sind und auf eine besuchte Adresse verweisen

:tomato: :target stellt ein spezielles Element dar, dessen ID die Fragmentkennung der URI ist

:exclamation: Beachten Sie, dass :link, :visited und :target auf Linkelemente einwirken! Die ersten beiden können nur auf dem a-Tag arbeiten

*{
                Rand: 0;
                Polsterung: 0;
            }
            div{
                Breite: 300px;
                Höhe: 200px;
                Zeilenhöhe: 200px;
                Hintergrund: blassgrün;
                Farbe: Pink;
                Textausrichtung: zentriert;
                Anzeige: keine;
            }
            a:besucht{
                Farbe: orange;
            }
            :Ziel{
                Anzeige: Block;
            }

2. Dynamische Pseudoklassen

:tomato: :hover bedeutet, den Mauszeiger über ein Element zu bewegen

:tomato: :active entspricht Elementen, die vom Benutzer aktiviert werden (klicken und halten)

:tomato:Da :link und :visited des A-Tags den Status aller A-Tags abdecken können, können :link und :visited nicht am Ende platziert werden, wenn :link, :visited, :hover und :active gleichzeitig im A-Tag erscheinen! ! !

:tomato: Datenschutz und der :visited-Selektor Auf besuchte Links können nur die folgenden Attribute angewendet werden: color, background-color, border-color

:exclamation: Beachten Sie, dass :hover und :active grundsätzlich auf alle Elemente wirken können!

<style type="text/css">
            *{
                Rand: 0;
                Polsterung: 0;
            }
            A{
                Textdekoration: keine;
                Farbe: Schwarz;
                Anzeige: Block;
            }
            ein:schweben{
                Schriftgröße: 24px;
                /*Farbe: rot;*/
            }
            
            ein:link{
                Schriftgröße: 48px;
                /*Farbe: rosa;*/
            }
            a:besucht{
                /*Schriftgröße:96px;*/
                /*Farbe: dunkelrosa;*/    
            }
        </Stil>

3. Formbezogene Pseudoklassen

①:disable stimmt mit deaktivierten Formularen überein

②: aktiviert entspricht dem ausgewählten Formular

③: Fokus entspricht der fokussierten Form

④: Aktiviert entspricht editierbaren Formularen

Praktische Übung 1

<Kopf>
    <meta charset="UTF-8">
    <Titel></Titel>
    <style type="text/css">
        Eingabe:aktiviert{
            Hintergrund: himmelblau;
        }
        Eingabe:deaktiviert{
            Hintergrund: Dunkelrosa;
        }
        Eingabe: aktiviert {
            Breite: 200px;
            Höhe: 200px;
        }
        Eingabe: Fokus {
            Hintergrund: rosa;
        }
    </Stil>
</Kopf>
<Text>
    <Eingabetyp="Text" />
    <input type="text" disabled="deaktiviert" />
    <Eingabetyp="Kontrollkästchen" />
    <Eingabetyp="Text" />
</body>

Übung 2: Anpassen von Optionsfeldern

<Kopf>
    <meta charset="UTF-8">
    <Titel></Titel>
    <style type="text/css">
        *{
            Rand: 0;
            Polsterung: 0;
        }
        Etikett{
            Position: relativ;
            float:left; /*In Elementerweiterungsgröße auf Blockebene konvertieren*/
            Breite: 100px;
            Höhe: 100px;
            Rand: 2px durchgezogen;
            Randradius: 50 %;
            Überlauf: versteckt;
        }
        Bezeichnung > Spanne{
            Position: absolut;
            links: 0;
            oben: 0;
            unten: 0;
            rechts:0;
        }
        Eingang{
            Position: absolut;
            links: -50px;
            oben: -50px;
        }
        Eingabe: geprüft + span{
            Hintergrund: rosa;
        }
    </Stil>
</Kopf>
<Text>
    <Bezeichnung>
        <Eingabetyp="Radio" Name="rongtuowulian" />
        <span></span>
    </Bezeichnung>
    <Bezeichnung>
        <Eingabetyp="Radio" Name="rongtuowulian" />
        <span></span>
    </Bezeichnung>
    <Bezeichnung>
        <Eingabetyp="Radio" Name="rongtuowulian" />
        <span></span>
    </Bezeichnung>
</body>

4. Pseudoelemente

:tomato: Konzept: Pseudoelemente stellen einige spezielle Elemente (spezielle Positionen) auf der Seite dar, die nicht wirklich existieren.

Die :tomato:-Syntax beginnt mit:

:tomato: Kategorien: ①::erster Buchstabe ②::erste Zeile ③::Auswahl ④::vorher ⑤::nachher Hinweis: ④ und ⑤ müssen in Verbindung mit dem Inhaltsattribut verwendet werden

:tomato: Codebeispiel:

<Kopf>
    <meta charset="utf-8">
    <meta name="viewport" content="width=Gerätebreite,Anfangsmaßstab=1.0" />
    <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
    <Titel></Titel>
    <style type="text/css">
    p:erster-Buchstabe{
        Farbe: #008000;
        Schriftgröße: 2,5rem;
    }
    p:erste-Zeile{
        Farbe: Aqua;
    }
    p::Auswahl{
        Farbe: rot;
    }
    p:vor{
        Inhalt: „Ich werde dich für immer lieben“;
        Farbe: blau;
    }
    p:nach{
        Inhalt: „Bist du sicher“;
        Farbe: grün;
    }
    </Stil>
</Kopf>
<Text>
    <div>Hallo, geht es dir gut?</div>
    <p> Ich bin immer noch ein Absatz. Ich bin viel, viel. Jiefangbei ist nicht schlecht. Behalten Sie die Konjunkturimpulse bei, hahahahahahahahahahahahahahahahahahahahahahahahahahahahaha</p>
</body>

5. Strukturelle Pseudoklassen (Schlüsselpunkte)

:tomato: Der Indexwert beginnt bei 1 zu zählen! ! ! ! Index kann variabel sein n (nur n) Index kann gerade ungerade sein

:tomato: #wrap ele:nth-child(index) bedeutet, dass das index-te Kindelement in #wrap übereinstimmt. Diese Pseudoklassen werden nach allen Kindelementen sortiert. Dieses Kindelement muss ele sein

:tomato: #wrap ele:nth-of-type(index) bedeutet, dass das index-te Element in #wrap übereinstimmt.

Darüber hinaus gibt es einen sehr wichtigen Unterschied zwischen :nth-child und :nth-of-type! ! nth-of-type ist elementzentriert und innerhalb des gleichen Typs sortiert, nth-child (relativ zu :first-child:last-child oder :nth-child(1):nth-last-child(1))

/* gerade bedeutet eine gerade Zahl

odd bedeutet ungerade Zahl

first-of-type: Rangfolge nach Typ p

first-child: alle Elemente werden angeordnet

*/

:tomato::nth-child(index) Serie

:erstes-Kind

:letztes Kind

:n-tes-letztes-Kind(Index)

:tomato::n-ter-Typ(Index)-Reihe

:Erster des Typs
:letzter-vom-Typ
:n-ter-letzter-Typ(Index)
:only-of-type (im Gegensatz zu :first-of-type:last-of-type
 oder:n-ter-vom-Typ(1):n-letzter-vom-Typ(1))    
:nicht        
:empty (der Inhalt muss leer sein, Leerzeichen sind nicht erlaubt und attr ist OK)

Codebeispiel

*{
            Rand: 0;
            Polsterung: 0;
        }
        #wrap li:n-ter-Typ(1){
            Farbe: rosa;
        }
        p:nur-vom-Typ{
            Rand: 1px durchgezogen;
        }

6. Pseudoelement-Selektoren

::nach

::vor

::ersterBuchstabe

::ersteZeile

::Auswahl

#wrap::vor{
        Inhalt:"";
        Anzeige:Block;
        Breite: 200px;
        Höhe: 200px;
        Hintergrund: #00FFFF;
    }
    #wrap::nach{
        Inhalt:"";
        Anzeige:Block;
        Breite: 200px;
        Höhe: 200px;
        Hintergrund: #0000FF;
    }

Dies ist das Ende dieses Artikels über die Implementierung neuer Probleme in CSS3-Selektoren. Weitere relevante neue Inhalte zu CSS3-Selektoren finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!