什么是伪元素？
一个CSS伪元素用于元素的指定样式的部分。
例如，它可用于：
- 风格的第一个字母，或行，元素
- 前插入内容，或之后，元素的含量
句法
伪元素的语法：
selector::pseudo-element {
property:value;
} | 注意双冒号符号- ::first-line与:first-line 双冒号替换为CSS3伪元素单冒号符号。 这是由W3C企图伪类 和伪元素之间进行区分。 被用于两个伪类和CSS2中和CSSI伪元素单结肠语法。 为了向后兼容，单冒号语法是CSS2 CSS1和伪元素可以接受的。 |
|---|
该::first-line伪元素
所述::first-line伪元素用于特殊风格添加到文本的第一行。
下面的示例格式中的所有文本的第一行<p>元素：
注意： ::first-line伪元素只能应用于块级元素。
下面的属性适用于::first-line伪元素：
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
该::first-letter伪元素
该::first-letter伪元素用于将特殊的样式添加到文本的第一个字母。
下面的示例格式中的所有文本的第一个字母<p>元素：
注意： ::first-letter伪元素只能应用于块级元素。
下面的属性适用于::first-letter pseudo-元素：
- font属性
- color特性
- background性质
- margin性质
- padding属性
- border属性
- text-decoration
- vertical-align （仅当"float"是"none" ）
- text-transform
- line-height
- float
- clear
伪元素和CSS类
伪元素可以与CSS类组合：
上面的例子将显示段的第一个字母与class="intro" ，在红，在一个较大的尺寸。
多重伪元素
若干伪元件也可以组合。
在下面的例子中，一个段落的第一个字母将是红色的，在XX-大字体大小。 第一行的其余部分将是蓝色，而小型股。 该段的其余部分将是默认字体大小和颜色：
例
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
} 试一试» CSS -的::before伪元素
在::before伪元素可以用来插入一个元素的内容之前的一些内容。
以下示例将每个内容之前的图像<h1>元素：
CSS -在::after伪元素
的::after伪元素可以用来插入一个元素的含量后一些内容。
以下示例将每个内容后的图像<h1>元素：
CSS -该::selection伪元素
的::selection伪元素是由用户选择的元素的部分相匹配。
下面的CSS属性可以应用到::selection ： color ， background ， cursor和outline 。
下面的示例使黄色背景选定的文本红色：
自测练习用！
所有CSS伪元素
| 选择 | 例 | 举例说明 |
|---|---|---|
| ::after | p::after | 每个<p>元素的内容之后插入的东西 |
| ::before | p::before | 每个内容前插入的东西<p>元素 |
| ::first-letter | p::first-letter | 选择每个的第一个字母<p>元素 |
| ::first-line | p::first-line | 选择每个的第一行<p>元素 |
| ::selection | p::selection | 选择由用户选择的一个元件的一部分 |
所有的CSS伪类
| 选择 | 例 | 举例说明 |
|---|---|---|
| :active | a:active | 选择活动链接 |
| :checked | input:checked | 选择每个检查<input>元素 |
| :disabled | input:disabled | 每一个选择禁用<input>元素 |
| :empty | p:empty | 选择每<p>没有孩子的元素 |
| :enabled | input:enabled | 选择每个已启用<input>元素 |
| :first-child | p:first-child | 选择每<p>元素是它的父的第一个孩子 |
| :first-of-type | p:first-of-type | 选择每<p>元素，它是第一个<p>它的父元素 |
| :focus | input:focus | 选择<input>元素具有焦点 |
| :hover | a:hover | 选择了鼠标链接 |
| :in-range | input:in-range | 选择<input>同的值的指定范围内的元件 |
| :invalid | input:invalid | 选择所有<input>具有无效值的元素 |
| :lang(language) | p:lang(it) | 选择每<p>用lang属性值开始元素"it" |
| :last-child | p:last-child | 选择每<p>元素是它的父的最后一个子 |
| :last-of-type | p:last-of-type | 选择每<p>元素是最后<p>它的父元素 |
| :link | a:link | 选择所有访问过的链接 |
| :not(selector) | :not(p) | 选择的每一个元素不是一个<p>元素 |
| :nth-child(n) | p:nth-child(2) | 选择每<p>元素是它的父的第二个孩子 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每<p>元素是它的父的第二个孩子，从最后一个子计数 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每<p>元素是第二<p>它的父元素，从最后一个子计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每<p>元素是第二<p>它的父元素 |
| :only-of-type | p:only-of-type | 选择每<p>元素是唯一<p>它的父元素 |
| :only-child | p:only-child | 选择每<p>元素是它的父的独生子 |
| :optional | input:optional | 选择<input>没有元素"required"的属性 |
| :out-of-range | input:out-of-range | 选择<input>与值的元素在指定范围之外 |
| :read-only | input:read-only | 选择<input>带元素"readonly"属性指定 |
| :read-write | input:read-write | 选择<input>没有元素"readonly"属性 |
| :required | input:required | 选择<input>与元素"required"指定属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活跃#news元（点击包含锚名的URL） |
| :valid | input:valid | 选择所有<input>与一个有效的价值要素 |
| :visited | a:visited | 选择所有访问过的链接 |