CSS3伪类选择器及伪元素

1.伪类选择器概述
在CSS中，可使用伪类选择器把相同的元素定义成不同的样式，如针对p元素，可以做以下定义。
p.right{text-align:right}
p.center{text-align:right}
在css中，除了上述类选择器之外，还有一种伪类选择器，这种伪类选择器与类选择器的区别是，类选择器可以随便起名，如上面的p.right和p.center,也可以命名为p。class1和p.class2,然后在页面上使用"class=‘class1’ "与"class=‘class2’ "，但是伪类选择器是css中已经定义好的选择器，不能随便起名。在css中我们最常用的伪类选择器是使用在a（锚）元素上的几种选择器，他们的使用方法如下所示。
a:link{color:#FF000;text-decoration:none}
a:visited{color:#FF00FF;text-decoration:none}
a:hover{color:#00FF00;text-decoration:none}
a:active{color:#000FF;text-decoration:none}
2.伪元素选择器概述
伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器。在css中，主要有一下四个伪元素选择器。
（1）、first-line伪类元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
例：

    
    
    


这是段落的第一行
这是段落第二行

效果如图：
在示例中，有一个p元素，在该元素内存在两行文字，使用first-line伪元素选择器将第一行文字设为红色。
（2）.first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。
例：

    
    
    


hello world!
欢迎来到新世界

效果如图：
在示例中有两段文字，一段是英文，一段是中文使用first-letter伪元素选择器可将两个段落的开头字母或文字颜色设置红色。

（3）.before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。使用方法如下
//可以插入一段元素
<元素>:before
{
content:"插入文字 "
}
//也可以插入其他内容
<元素>:before
{
content:“url(test.wav)”
}
例：

    
    
    



    
列表1
    
列表2
    
列表3
    
列表4
    
列表5

效果如图：
在本示例中有一个ul列表，使用before在该列表前加*

（4）.after伪元素选择器
after伪元素用于在某个元素之后插入一些内容，使用方法如下
<元素>:after
{
content:“插入文字”
}
//也可以插入其他内容
<元素>:after
{
content:“url(test.wav)”
}
例：

    
    
    



    
列表1
    
列表2
    
列表3
    
列表4
    
列表5

效果如图：
在本示例中有一个ul列表，使用after在该列表后加*