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伪元素选择器用于向某个元素中的第一行文字使用样式。
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p:first-line{
color:red;
}
</style>
</head>
<body>
<p>这是段落的第一行<br/>这是段落第二行</p>
</body>
</html>
效果如图：
在示例中，有一个p元素，在该元素内存在两行文字，使用first-line伪元素选择器将第一行文字设为红色。
（2）.first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p:first-letter{
color:red;
}
</style>
</head>
<body>
<p>hello world!</p><br/><p>欢迎来到新世界</p>
</body>
</html>
效果如图：
在示例中有两段文字，一段是英文，一段是中文使用first-letter伪元素选择器可将两个段落的开头字母或文字颜色设置红色。
（3）.before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。使用方法如下
//可以插入一段元素
<元素>:before
{
content:"插入文字 "
}
//也可以插入其他内容
<元素>:before
{
content:“url(test.wav)”
}
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li:before{content:"*"}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</body>
</html>
效果如图：
在本示例中有一个ul列表，使用before在该列表前加*
（4）.after伪元素选择器
after伪元素用于在某个元素之后插入一些内容，使用方法如下
<元素>:after
{
content:“插入文字”
}
//也可以插入其他内容
<元素>:after
{
content:“url(test.wav)”
}
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li:after{content:"*"}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</body>
</html>
效果如图：
在本示例中有一个ul列表，使用after在该列表后加*
