伪元素和CSS类

 

    伪元素可以结合CSS类：

 

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

 

    <pclass="article">文章段落</p>

 

    上面的例子会使所有class为article的段落的首字母变为红色。

 

    多个伪元素

 

    可以结合多个伪元素来使用。

 

    在下面的例子中，段落的第一个字母将显示为红色，其字体大小为xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。

 

    段落中的其余文本将以默认字体大小和颜色来显示：

 

    实例

 

p:first-letter

 

{

 

    color:#ff0000;

 

    font-size:xx-large;

 

}

 

p:first-line 

 

{

 

    color:#0000ff;

 

    font-variant:small-caps;

 

}