css伪类、伪元素选择器

1.伪类选择器

条件一：根据元素不同的状态，自动选择不同的样式。或条件二，直接添加一个class，再给这个class添加特定的样式。

A.伪类的语法：

（1）selector:pseudo-class {property:value;}

css类也可以使用伪类：

（2）selector.class:pseudo-class {property:value;}

B.关于链接的伪类选择器

例子：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

C.伪类可以和CSS类配合使用

a.red:visited {color:#FF0000;}
 
<a class="red" href="css-syntax.html">CSS 语法</a>

注： 如果在上面的例子的链接已被访问，它会显示为红色。
D. CSS - :first - child伪类

可以使用 :first-child 伪类来选择元素的第一个子元素,但是在IE8的之前版本必须声明<!DOCTYPE> ，这样 :first-child 才能生效。

例子：匹配第一个P元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

示例：
p:first-child
{
    color:blue;
}

2.伪元素选择器

需要设置特殊效果的内容放到一个元素（标签）里面，在添加一个class，对class设置特殊样式。简言之，就是CSS伪元素是用来添加一些选择器的特殊效果。

语法：

伪元素的语法
selector:pseudo-element {property:value;}

css类也可以使用伪元素：

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

A . :first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

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

注意："first-line" 伪元素只能用于块级元素。

注意： 下面的属性可应用于 "first-line" 伪元素：

1. font properties
2. color properties 
3. background properties
4. word-spacing
5. letter-spacing
6. text-decoration
7. vertical-align
8. text-transform
9. line-height
10. clear

B. ：first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

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

注意： "first-letter" 伪元素只能用于块级元素。

注意： 下面的属性可应用于 "first-letter" 伪元素： 

1. font properties
2. color properties 
3. background properties
4. margin properties
5. padding properties
6. border properties
7. text-decoration
8. vertical-align (only if "float" is "none")
9. text-transform
10. line-height
11. float
12. clear

C. css-:before伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1>元素前面插入一幅图片：

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

D . css-:after 伪类元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片：

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

E.所有css伪类元素

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	a:foucs	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容