本文共 7908 字，大约阅读时间需要 26 分钟。

本文转自：

伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法，最后把重心放到CSS3新增加的":nth-child"选择器的使用方法。

一、动态伪类

动态伪类，因为这些伪类并不存在于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用于元素成为焦点，这个经常用在表单元素上。

对于: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"这三种选择器。

三、CSS3的:nth选择器

这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法：

1.  :first-child        选择某个元素的第一个子元素；
2.  :last-child        选择某个元素的最后一个子元素；
3.  :nth-child(n)        选择属于其父元素的第 N 个子元素，不论元素的类型(子元素从1开始计算，而不是0),n 可以是数字、关键词或公式；
4.  :nth-last-child()   选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
5.  :nth-of-type()      选择指定的元素；
6.  :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
7.  :first-of-type      选择一个上级元素下的第一个同类子元素；
8.  :last-of-type       选择一个上级元素的最后一个同类子元素；
9.  :only-child         选择的元素是它的父元素的唯一一个了元素；
10.  :only-of-type       选择一个元素是它的上级元素的唯一一个相同类型的子元素；
11.  :empty              选择的元素里面没有任何内容。

下面我们针对上面所列的各种选择器，一个一个来介绍：

1、:first-child

:first-child是用来选择某个元素的第一个子元素。

.demo li:first-child {background: green; border: 1px dotted blue;}

或者

.demo li.first {background: green; border: 1px dotted blue;}

2、:last-child

:last-child选择器与:first-child选择器的作用类似，不同的是":last-child"选择是的元素的最后一个子元素。

.demo li:last-child {background: green; border: 2px dotted blue;}

或者

.demo li.last {background: green; border: 2px dotted blue;}

3、:nth-child()

:nth-child()可以选择某个的一个或多个特定的子元素， 你可以按这种方式进行选择：

:nth-child(length);/*参数是具体数字*/			:nth-child(n);/*参数是n,n从0开始计算*/			:nth-child(n*length)/*n的倍数选择，n从0开始算*/			:nth-child(n+length);/*选择大于length后面的元素*/			:nth-child(-n+length)/*选择小于length前面的元素*/			:nth-child(n*length+1);/*表示隔几选一*/			//上面length为整数

:nth-child(3),选择某元素下的第三个子元素，（这里的3可以是你自己需要的数字）

实例：

这是标题
第一个段落。
第二个段落。
第三个段落。
第四个段落。

nth-child(n)不能引用负值，也就是说li:nth-child(-3)是不正确的使用方法。

:nth-child(n)，其中n是一个简单的表达式，那么"n"取值是从“0”开始计算的，到什么时候结束我也不知道，如果你在实际应用中直接这样使用的话，将会选中所有子元素。比如说，在我们的demo中，你在li中使用":nth-child(n)",那么将选中所有的"li",如：

.demo li:nth-child(n) {background: lime;} 			等于			.demo li {background: lime;}

:nth-child(2n),这中方式是前一种的变身，我们可以选择n的2倍数，当然其中“2”可以换成你自己需要的数字，如：

.demo li:nth-child(2n) {background: lime;}			等于			.demo li:nth-child(even) {background: lime;}

“:nth-child(2n)”也等于":nth-child(even)"效果。

:nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的，上面说了人是选择偶数，那么我们在他的基础上减去“1”就变成奇数选择，如：

.demo li:nth-child(2n-1) {background: lime;}

:nth-child(-n+5)这种选择器刚好和上面的选择器相反，这个是选择第5个前面的，如：

.demo li:nth-child(n+5) {background: lime;}

:nth-child(-n+5)这种选择器刚好和上面的选择器相反，这个是选择第5个前面的，如：

.demo li:nth-child(-n+5) {background: lime;}

:nth-child(4n+1)这种方法是实现隔几选一的效果，比如我们这里是隔三选一，如果你把"4"换成别的数字那就是另外的一种隔法了。

4、:nth-last-child()

":nth-last-child()"选择器和前面的":nth-child()"很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，他只要是从最后一个元素开始算，来选择特定元素，如下面的实例表示的就是取倒数第4个li元素：

.demo li:nth-last-child(4) {background: lime;}

其中":nth-last-child(1)"和":last-child"所起作用是一样的，都表示的是选择最后一个元素。另外":nth-last-child()"也可以像“:nth-child()”一样，可以使用表达式来选择特定元素，下面我们来看几个特殊的表达式所起的作用

:nth-last-child(2n),这个表示的是从元素后面计算，选择的是偶数个数，从而反过来说就是选择元素的奇数，和前面的":nth-child(2n+1)",":nth-child(2n-1)",":nth-child(odd)"所起的作用是一样的。

:nth-last-child(2n-1)这个选择器刚好跟上面的相反，从后面计算选择的是奇数，而从前面计算选择的就是偶数位了，这个前面的":nth-child(2n)"之类是相同的效果，如：

.demo li:nth-last-child(2n+1) {background: lime;}			.demo li:nth-last-child(2n-1) {background: lime;}			.demo li:nth-last-child(odd) {background: lime;}			等于：			.demo li:nth-child(2n) {background: lime;}			.demo li:nth-child(even) {background: lime;}

":nth-last-child()"和"nth-child()"使用方法是一样的，只不过他们的区别是“:nth-child()”是从元素的第一个开始计算，而“:nth-last-child()”是从元素的最后一个开始计算，他们的计算方法都是一样的。

5、:nth-of-type

:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处。比如说，我们div.demo下有好多p元素，li元素，img元素等，但我只需要选择p元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：

.demo p:nth-of-type(even) {background-color: lime;}

6、:nth-last-of-type

这个选择器不用说大家都能想得到了，他和前面的:nth-last-child一样使用，只是他指一了元素的类型而以。

7、:first-of-type和:last-of-type

:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。

:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type实际意义并不是很大，我们前面讲的:nth-child之类选择器就能达到这此功能，不过大家要是感兴趣还是可以了解一下，个人认为实用价值并不是很大。此类说法仅供参考。

8、:only-child和:only-of-type

":only-child"表示的是一个元素是它的父元素的唯一一个子元素。我们一起来看一个实例更好理解

   
	    	
    
Lorem ipsum dolor sit amet, consectetur
	    	
    
Lorem ipsum dolor sit amet, consectetur
	    
   
	    
   
	    	
    
Lorem ipsum dolor sit amet, consectetur
	    
   

css样式

.demo .post p {background: lime;}

.demo .post p {background: lime;}			.demo .post p:only-child {background: red;}

:only-of-type是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的，那么我们使用这种选择方法就可以选择中这个唯一的子元素，比如说

    
	    	
     
      Lorem ipsum dolor sit amet, consectetur
     
	    	
     
Lorem ipsum dolor sit amet, consectetur
			  
     
      Lorem ipsum dolor sit amet, consectetur
     
	    
    

p:only-of-type{background-color:red;}

9、:empty

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

p:empty {display: none;}

三、否定选择器（:not）

否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not为实现。

input:not([type="submit"]) {border: 1px solid red;}

四、伪元素

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

那么我们简单了解一下他们的作用：

::first-line选择元素的第一行。

p::first-line {font-weight:bold;}

::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多，比如说首字下沉。

p::first-letter {font-size: 56px;float:left;margin-right:3px;}

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动。

.clearfix:before,			.clearfix:after {			     content: ".";			     display: block;			     height: 0;			     visibility: hidden;			  }			 .clearfix:after {clear: both;}			 .clearfix {zoom: 1;}

::selection用来用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的。

:before和:after伪元素

:before和:after伪元素创建了一个虚假的元素，并插入到目标元素内容之前或之后，如果没有设置“content”属性，:before和:after伪元素伪元素是无用的。你可以设置content属性值为空，并且仅仅把他当做一个内容很少的盒子。像这样:

#example:before {  content: "";  display: block;  width: 100px;  height: 100px;}

然而，你不可以完全的移除content属性，如果你移除了，伪元素将不会起作用。至少，content属性需要空引用作为它的值(即:content:“”)。

你也许注意到，你也可以用两个冒号(::before 和 ::after) 写伪元素。对于这两种语法没有什么不同，仅仅一点的不同是，伪元素(双冒号)，css3中的伪类是（单冒号）。

正如前面提及的，插入的内容在页面DOM的源码里是不可见的，只能在css里可见。

同时，插入的元素在默认情况下是内联元素。因此，为了给插入的元素赋予高度，填充，边距等等，你通常必须显式地定义它是一个块级元素。这会是对如何设计伪元素的一个简要的说明，看我下面文本编辑器的这幅图:

在这个例子中，我高亮的样式将被应用到元素里插入到目标元素内容的前面和后面。

还要注意的是典型的CSS继承规则适用于插入的元素。例如，你有字体系列黑体，宋体，无衬线字体应用到body元素里，然后伪元素会像其他元素一样继承这些字体系列。

同样的，伪元素不会继承没有自然继承自父元素(如 padding and margins)的样式。

插入文本/非文本内容

我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择

首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的:

p:before {  content: url(image.jpg);}

CSS :before 选择器

定义和用法

:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

实例

在每个 <p> 元素的内容之前插入新内容：

我是唐老鸭。
我住在 Duckburg。
注释：对于在 IE8 中工作的 :before，必须声明 DOCTYPE。

查看结果:

定义和用法

:after 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

实例

在每个 <p> 元素的内容之后插入新内容：

我是唐老鸭。
我住在 Duckburg。
注释：对于在 IE8 中工作的 :after，必须声明 DOCTYPE。

查看结果: