Beispiele für neue Selektoren in CSS3

Struktureller (Position) Pseudoklassenselektor (CSS3)

• :first-child : Der angegebene Selektor wählt das erste Kindelement seines Elternelements aus.
• :last-child : Der angegebene Selektor wählt das letzte Kindelement seines Elternelements aus.
• :nth-child(n) : entspricht dem N-ten Kindelement seines Elternteils, unabhängig vom Typ des Elements
• :nth-last-child(n): Der Selektor passt zu jedem Element, das das N-te untergeordnete Element seines Elements ist, unabhängig vom Elementtyp, gezählt vom letzten untergeordneten Element. n kann eine Zahl, ein Schlüsselwort oder eine Formel sein

li:first-child { /* Wähle das erste Kind aus */
                Farbe: rosa; 
            }
li:last-child { /* letztes Kind */
                Farbe: lila;
            }
li:nth-child(4) { /* Wähle das vierte Kind aus, n steht für die Zahl */ 
                Farbe: himmelblau;
            }

Attributselektoren

Selektoren, die Tags mit bestimmten speziellen Attributen auswählen, werden Attributselektoren genannt.

/* Holen Sie sich das Element mit diesem Attribut */
div[class^=font] { /* class^=font bedeutet die Startposition der Schriftart*/
            Farbe: rosa;
        }
div[class$=footer] { /* class$=footer gibt die Endposition des Fußbereichs an*/
            Farbe: himmelblau;
        }
div[class*=tao] { /* class*=tao *= bedeutet, dass tao an jeder beliebigen Position stehen kann*/
            Farbe: grün;
        }
<div class="font12">Attributselektor</div>
    <div class="font12">Attributselektor</div>
    <div class="font24">Attributselektor</div>
    <div class="font24">Attributselektor</div>
    <div class="font24">Attributselektor</div>
    <div class="24font">Attributselektor 123</div>
    <div class="sub-footer">Attribut-Selektor Fußzeile</div>
    <div class="jd-footer">Attribut-Selektor-Fußzeile</div>
    <div class="news-tao-nav">Attributselektor</div>
    <div class="news-tao-header">Attributselektor</div>
    <div class="tao-header">Attributselektor</div>
Eingabe [Typ=Text]
div[Klasse*=tao]

Pseudoelement-Selektoren (CSS3)

• E::erster Buchstabe Das erste Wort oder Zeichen des Textes (z. B. Chinesisch, Japanisch, Koreanisch usw.)
• E::erste Zeile, erste Textzeile;
• E::selection kann den Stil des ausgewählten Textes ändern;

p::erster-Buchstabe {
  Schriftgröße: 20px;
  Farbe: Pink;
}
/*Spezielles Format für die erste Zeile*/
p::erste-Zeile {
  Farbe: himmelblau;
}
p::Auswahl {
  /* Schriftgröße: 50px; */
  Farbe: orange;
}

4. E::before und E::after

Erstellen Sie an den Start- und Endpositionen innerhalb des E-Elements ein Element. Dieses Element ist ein Inline-Element und muss in Verbindung mit dem Inhaltsattribut verwendet werden.

div::vor {
  Inhalt: „Start“;
}
div::nach {
  Inhalt: „Ende“;
}

E:after und E:before sind in älteren Versionen Pseudoelemente. In der CSS3-Spezifikation wird „:“ zur Darstellung von Pseudoklassen und „::“ zur Darstellung von Pseudoelementen verwendet. In Browsern höherer Versionen werden E:after und E:before jedoch automatisch als E::after und E::before erkannt. Dies geschieht aus Kompatibilitätsgründen.

Der Unterschied zwischen ":" und "::" besteht darin, dass sie zwischen Pseudoklassen und Pseudoelementen unterscheiden.

Sie werden Pseudoelemente genannt, weil sie keine echten Seitenelemente sind. HTML hat keine entsprechenden Elemente, aber ihr gesamtes Nutzungs- und Leistungsverhalten ist das gleiche wie bei echten Seitenelementen. Sie können für sie dieselben CSS-Stile wie für Seitenelemente verwenden. Oberflächlich betrachtet sehen sie wie bestimmte Elemente der Seite aus, aber tatsächlich sind es Verhaltensweisen, die durch CSS-Stile angezeigt werden. Daher werden sie Pseudoelemente genannt. Es handelt sich um die Anzeige von Pseudoelementen in der HTML-Codestruktur. Es ist ersichtlich, dass die Struktur von Pseudoelementen nicht überprüft werden kann.

Beachten

Der von den Pseudoelementen :before und :after hinzugefügte Inhalt ist standardmäßig ein Inline-Element**; das Inhaltsattribut dieser beiden Pseudoelemente stellt den Inhalt der Pseudoelemente dar. Wenn Sie :before und :after festlegen, müssen Sie deren Inhaltsattribut festlegen, sonst funktionieren die Pseudoelemente nicht.

Zusammenfassen

Oben sehen Sie ein Beispiel für den neuen Selektor in CSS3, den ich Ihnen vorgestellt habe. Ich hoffe, es ist hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!