Latest web development tutorials

CSS Pseudo-Elemente

CSS-Pseudoelement wird verwendet, um einige Spezialeffekte-Selektoren hinzuzufügen.

Grammatik

Pseudo-Element-Syntax:

selector:pseudo-element {property:value;}

CSS-Klassen können auch Pseudo-Elemente verwenden:

selector.class:pseudo-element {property:value;}

: First-line Pseudoelement

"Erste-line" Pseudo-Element wird verwendet, um einen besonderen Stil auf die erste Textzeile einzurichten.

Im folgenden Beispiel wird der Browser auf "first-line" Pseudo-Element im Stil der ersten Zeile von Textelementen p-Format basieren:

Beispiele

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

Versuchen »

Hinweis: "first-line" Pseudo-Element kann nur für Block-Elemente verwendet werden.

HINWEIS: Die folgenden Eigenschaften können "first-line" Pseudo-Element auf die angewendet werden:

  • Schrifteigenschaften
  • Farbeigenschaften
  • Hintergrundeigenschaften
  • Wort-Abstand
  • Zeichenabstand
  • text-decoration
  • vertical-align
  • text-trans
  • line-height
  • klar

: Erste-Buchstaben-Pseudoelement

"Erste Buchstaben" Pseudo-Element wird verwendet, um einen besonderen Stil auf den ersten Buchstaben des Textes einzurichten:

Beispiele

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

Versuchen »

Hinweis: "first-letter" Pseudo-Element kann nur für Block-Elemente verwendet werden.

HINWEIS: Die folgenden Eigenschaften können "first-letter" Pseudo-Element an die angewendet werden:

  • Schrifteigenschaften
  • Farbeigenschaften
  • Hintergrundeigenschaften
  • Randeigenschaften
  • Polstereigenschaften
  • Rahmeneigenschaften
  • text-decoration
  • vertical-align (nur wenn "float" ist "none")
  • text-trans
  • line-height
  • Schwimmer
  • klar

Pseudo-Elemente und CSS-Klassen

Pseudo-Elemente können mit CSS-Klassen kombiniert werden:

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

Das obige Beispiel wird alle Klasse machen, wie der erste Buchstabe des Absatzes Artikel rot wird.

Mehrere Pseudo-Elemente

Eine Vielzahl von pseudo-Elemente können zur Verwendung kombiniert werden.

Im folgenden Beispiel wird der erste Absatz des Schreibens in rot angezeigt werden, ist die Schriftgröße xx-groß. Die erste Zeile der Rest des Textes wird blau, und kleine Großbuchstaben sein.

Die übrigen Absätze des Texts in der Standardschriftgröße und Farbe angezeigt werden soll:

Beispiele

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

Versuchen »

CSS -: vor Pseudo-Element

": Vor der" Pseudoelement können neue Inhalte vor dem Inhalt des Elements einzufügen.

Das folgende Beispiel ein Bild vor jedem <h1> Element eingefügt werden:

Beispiele

h1:before
{
content:url(smiley.gif);
}

Versuchen »

CSS -: nach Pseudo-Element

": Nach dem" Pseudo-Element neue Inhalte nach dem Inhalt des Elements einfügen können.

Die folgenden Beispiele fügen ein Bild nach jedem <h1> Element:

Beispiele

h1:after
{
content:url(smiley.gif);
}

Versuchen »

Alle CSS-Pseudoklassen / Elemente

Wähler Beispiel Beispiel zeigt,
: link a:link Wählen Sie alle nicht besuchte Links
: visited a:visited Wählen Sie alle besuchten Links
: aktiv a:active Select ist ein aktiver Link
: Hover a:hover Setzen Sie die Maus auf den Link Status
: Fokus input:focus Nachdem das Eingangselement ausgewählt hat Fokus
: First-letter p:first-letter Wählen Sie den ersten Buchstaben jedes Element <p>
: First-line p:first-line Wählen Sie die erste Zeile jedes Element <p>
: First-child p:first-child <] P> Elementselektoreinrichtung passt auf jedes Element mit dem ersten Kind-Element gehört,
: vor p:before Legen Sie Inhalt vor jedem Element <p>
: nach p:after Inhalt einfügen nach jedem Element <p>
: Lang (Sprache) p:lang(it) Attribut lang Auswahl <p> Element auf einen Startwert