前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法，最后把重心放到CSS3新增加的":nth-child"选择器的使用方法。

和前面一样，在开始之前先创建一个Dom:

<div class="demo clearfix">
  <ul class="clearfix">
	<li class="first links odd" id="first"><a href="">1</a></li>
	<li class="links even"><a href="">2</a></li>
	<li class="links odd"><a href="">3</a></li>
	<li class="links even"><a href="">4</a></li>
	<li class="links odd"><a href="">5</a></li>
	<li class="links even"><a href="">6</a></li>
	<li class="links odd"><a href="">7</a></li>
	<li class="links even"><a href="">8</a></li>
	<li class="links odd"><a href="">9</a></li>
	<li class="links even last" id="last"><a href="">10</a></li>
</ul>
</div>
		

同样先加上一些样式，让他看起来好看一点

			.demo {
				width: 300px;
				border: 1px solid #ccc;
				padding: 10px;			
			}
			.demo li {
				border: 1px solid #ccc;
				padding: 2px;
				float: left;
				margin-right:4px;
			}
		 	.demo a {
				float: left;
				display: block;
				height: 20px;
				line-height: 20px;
				width: 20px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				text-align: center;
				background: #f36;
				color: green;
				text-decoration: none;
			}
		

最出效果：

CSS的伪类语法和别的语法有点不一样，其主要有两种语法表达方式

			E:pseudo-class {property:value}/*其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值*/
		

示例：

			a:link {color:red;}
		

第二种写法

			E.class:pseudo-class{property:value}
		

如：

			a.selected:hover {color: blue;}
		

下面开始我们一起来看看这些伪类的具体应用：

一、动态伪类

动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类，如“:hover”,":active"和":focus"。先来看最常见的锚点伪类

			.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
			.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
			.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
			.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
		

对于这四个锚点伪类的设置，有一点需要特别注意，那就是他们的先后顺序，要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。如果你把顺序搞错了会给你带来意想不到的错误，大家对于这个应该很熟悉的，如果是初学的朋友，可以私下练习一下。其中:hover和:active又同时被列入到用户行为伪类中，他们所表达的意思是：

1. :hover用于当用户把鼠标移动到元素上面时的效果；
2. :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
3. :focus用于元素成为焦点，这个经常用在表单元素上。

本站的button就采用了这几处效果：

			.form-submit {
			    -moz-transition: border-color 0.218s ease 0s;
					-webkit-transition: border-color 0.218s ease 0s;
					-o-transition: border-color 0.218s ease 0s;
					-ms-transition: border-color 0.218s ease 0s;
					transition: border-color 0.218s ease 0s;
			    background: none repeat scroll 0 0 #F5F5F5;
			    border: 1px solid #DCDCDC;
					-moz-border-radius: 2px 2px 2px 2px;
					-webkit-border-radius: 2px 2px 2px 2px;
			    border-radius: 2px 2px 2px 2px;
			    color: #333333;
			    font: 11px/27px arial,sans-serif;
			    height: 27px;
			    padding: 0 8px;
			    text-align: center;
			    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
			}
			.form-submit:hover {
			    background-color: #F8F8F8;
			    border-color: #C6C6C6;
					-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
					-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
			    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
			    color: #333333;
			}
			.form-submit:active {
			    border-color: #4D90FE;
					-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
					-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
			    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
			    color: #000000;
			}
			.form-submit:focus {
			    border: 1px solid #4D90FE !important;
			}
		

你可以点击这里体验一下这种效果。

对于:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。

二、UI元素状态伪类

我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用

			input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
		

这样一来就把页面中禁用的文本框应用了一个不同的样式。那么对于其他几个用法是一样的，这里就不在讲述。IE6-8不支持":checked",":enabled",":disabled"这三种选择