CSS Pseudo-elements(伪元素)

CSS Pseudo-elements 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。注意：与伪元素比较，pseudo-classes(伪类) 能够根据状态改变元素样式。

CSS伪元素是一种样式化文档元素的方法，这些元素没有由文档树中的位置明确定义。

什么是伪元素

CSS伪元素允许您设置元素或元素部分的样式，而无需向其添加任何ID或类。当您只想为段落的第一个字母设置样式以创建首字下沉效果，或者只想通过样式表在元素之前或之后插入一些内容等情况下，这将非常有用。

CSS3 为伪元素引入了新的双冒号（::）语法，以区分伪元素和伪类。伪元素的新语法可以通过以下方式给出：

这些是以下最常用的伪元素：

::first-line 第一行伪元素

该::first-line伪元素应用特殊的样式添加到文本的第一行。

以下示例中的样式规则设置了段落中第一行文本的格式。第一行的长度取决于浏览器窗口或包含元素的大小。

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

:: first-letter伪元素

::first-letter伪元素用于将特殊的样式添加到文本的第一行的第一个字母。以下示例中的样式规则设置文本段落的首字母格式，并创建类似首字下沉的效果。

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

:: before und :: after Pseudo-Elemente

::before und ::after Pseudo-Elemente können verwendet werden, um generierten Inhalt vor oder nach dem Inhalt eines Elements einzufügen. content Bei der Kombination von CSS-Eigenschaften mit diesen Pseudo-Elementen wird das generierte Inhalt eingefügt.

Das ist sehr nützlich für das Furthergestalten reicher Inhalte, die nicht zur tatsächlichen Markierung der Seite gehören. Sie können mit diesen Pseudo-Elementen reguläre Strings oder eingebettete Objekte (z.B. Bilder) und andere Ressourcen einfügen.

h1::before　{
　　　　content:　url("images/marker-left.gif");
}
h1::after　{
　　　　content:　url("images/marker-right.gif");
}

Pseudo-Elemente und CSS-Klassen

Normalerweise benötigen wir diese Pseudo-Elemente nur, um einen Abschnitt oder anderes Textes zu setzenblockweiseStilelemente. Dort wird eine Klasse für einen Pseudo-Element erklärt, was wirkt. Pseudo-Elemente können mitCSS-KlasseKombinationen, um Effekte zu erzeugen, insbesondere für Elemente mit dieser Klasse.

Die Styleregeln in den folgenden Beispielen zeigen den ersten Buchstaben aller Absätze mit der Klasse "article" in grün und der Größe xx an-large。

p.article::first-letter　{
　　　　color:　#00ff00;
　　　　font-size:　xx-large;
}