css伪元素用法 – CSS高级教程-srcmini

CSS伪元素是一种对文档中没有被文档树中的位置显式定义的元素进行样式化的方法。

什么是伪元素？

CSS伪元素允许你在不添加任何id或类的情况下对元素或元素的部分进行样式设置。当你只是想给一个段落的第一个字母加上样式来创建一个下拉帽效果，或者你只想通过样式表在一个元素之前或之后插入一些内容时，这将是非常有用的。

CSS3为伪元素引入了一个新的双冒号(::)语法，以区分它们和伪类。伪元素的新语法如下：

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

以下是最常用的伪元素：

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

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

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

注意：可以应用到:::first-line伪元素的CSS属性有：字体属性、背景属性、颜色、单词间距、字母间距、文本装饰、垂直对齐、文本转换、行高。

::first-letter伪元素用于为文本第一行的第一个字母添加特殊的样式。下面示例中的样式规则格式化文本段落的第一个字母，并创建类似于drop cap的效果。

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

注意:可以应用到::first-letter伪元素的CSS属性有：字体属性、文本装饰、文本转换、字母间距、单词间距、行高、浮动、垂直对齐(只有当“float”为“none”时)、颜色、空白和填充属性、边框属性、背景属性。

可以使用::before和::after伪元素在元素内容之前或之后插入生成的内容，内容CSS属性与这些伪元素一起使用，以插入生成的内容。

这对于使用不应该是页面实际标记的一部分的丰富内容进一步修饰元素非常有用。可以使用这些伪元素插入常规的文本字符串或嵌入的对象(如图像和其他资源)。

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

通常，我们只需要使用这些伪元素为文本的某个段落或其他块级别的元素设置样式。这时就需要向伪元素声明一个类。伪元素可以与CSS类结合使用，以产生这种效果，特别是对于具有该类的元素。

下面示例中的样式规则将显示所有段落的第一个字母和class=”article”，用绿色表示，大小为xx-large。

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