无论是伪类还是伪元素，都属于CSS选择器的范畴。
一、伪类选择器：CSS中已经定义好的选择器,不能随便取名，常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active。
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才是有效的。
二、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器。
CSS中有如下四种伪元素选择器：
l first-line:为某个元素的第一行文字使用样式；
l first-letter:为某个元素中的文字的首字母或第一个字使用样式；
l before:在某个元素之前插入一些内容；
l after: 在某个元素之后插入一些内容；
使用方法：选择器：伪元素{样式列表}
三、CSS中还有一种称为结构性伪类选择器，主要包含以下几个方面：
1. 四个最基本的：root、not、empty、target
2. first-child、last-child、nth-child、nth-last-child、 nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)
3. nth-of-type、nth-last-of-type
4. 循环使用样式
5. only-child
l :root()选择器，从字面上我们就可以很清楚的理解是根选择器，它的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。:root选择器等同于<html>元素
l :not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
l :empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
l :target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用
l :first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
l :nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素。
看下面一个例子：
<style type="text/css">
div p:nth-last-child(2){
color:red;
}</style>
</head>
<body>
<div>
<p>前端</p>
<p>开发</p>
<p>工程</p>
<p>软件</p>
<p>工程</p>
</div>
</body>
l :nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：
l :nth-child(length);/*参数是具体数字*/
l :nth-child(n);/*参数是n,n从0开始计算*/
l :nth-child(n*length)/*n的倍数选择，n从0开始算*/
l :nth-child(n+length);/*选择大于length后面的元素*/
l :nth-child(-n+length)/*选择小于length前面的元素*/
l :nth-child(n*length+1);/*表示隔几选一*/
面length为整数
值得注意的是：nth-child(0)没有选择元素，nth-child(1)选择第一个元素。
l :nth-of-type(n)”选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用:nth-of-type(n)选择器来定位于父元素中某种类型的子元素是非常方便和有用的。
l :only-child表示的是一个元素是它的父元素的唯一一个子元素。
四、伪元素：
CSS中的伪元素:first-line,:first-letter,:before,:after;在CSS3中，它对伪元素进行了一定的调整，在以前的基础上增加了一个：也就是现在变成了::first-letter，::first-line，::before，::after，另外他还增加了一个::selection,两个::和一个：css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而已。
::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个p::first-line {font-weight:bold;}
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用content配合使用，见过最多的就是清除浮动，但功能依然强大。
0592-6680862 厦门市集美软件园三期A03 12楼 0592-6377179 wenjing.zhang@chukong-inc.com
Copyright © 2010-2015 CHUKONG CO, INC. All Rights Reserved design by:huudon
闽ICP备16028858号-1 京公网安备11010502020289
