[转]CSS3 伪类

结构伪类（Structural Pseudo-Class）

　　根据W3C的定义：

… permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.

这意味着基于文档中元素的位置，我们可以动态的选择内容。所以，我们先从文档的根部:root开始。

　　E:root

　　:root用来选择页面的根元素。一般使用该选择器一定会选中的是，我想你已经猜到了，。例如：
:root { background-color: #fcfcfc; }
但是，这样却几乎没有什么意义，用html来代替root会更加易懂。

　　E:nth-child(n)

　　E:nth-child( )选择器稍微复杂一些。该选择器最简单的使用方法是使用odd或者even，这对于表格数据的显示非常有用，例如：
ul li:nth-child(odd) 
{ background-color: #666; color: #fff; }这样使无序列表中的偶数元素高亮显示，该选择器对于表格来说尤其好用：
table tr:nth-child(even) { … }该选择器使用起来可以非常灵活，比如你可以选择列表中的第三个元素：
li:nth-child(3) { … }需要注意的是，并不是从0开始的，这与数组中的元素不同。该选择可不止这么简单，我们来玩玩新花样。
li:nth-child(2n) { … }该表达式可以选中列表中的偶数元素，与nth-child(even)的效果一致。还可以有更复杂的效果：
li:nth-child(4n + 1) { … }这样选中的是第1,5,9,13,17……个元素。如果想选中前五个元素应该如何设定呢？
li:nth-child(-n + 5) { … }如果你想根据流行度来进行排序，并且高亮前N个元素，这样提供了一种非常便捷的方法。

        E:nth-last-child(n)

　:nth-last-child(n)与:nth-child(n)相反，在选中的元素中从最后一个向前数。
li:nth-last-child(1) { … }上面的代码会选中列表中的最后一个元素。当然参照:nth-child(n)的方法你可以构建相似的表达式来确定选择的对象。对于结构伪类想要有更加直观的印象，请猛击CSS3 structural pseudo-class selector tester。

　　E:nth-of-type(n)

　　这个属性可以让我们实现更多好玩有趣的东西。如果你想将文章的第一段用稍大的字体显示应该怎么做呢？
article p:nth-of-type(1) { font-size: 1.5em; }可能你想让文章中奇数的图片右对齐，偶数的左对齐：
article img:nth-of-type(odd) { float: right; }
article img:nth-of-type(even) { float: left; }像:nth-child(n)与:nth-last-child(n)一样，其中的n可以根据需求进而自行定义。

　　E:nth-last-of-type(n)

　　我想你已经知道这个该怎么使用了，对吗？

　　E:first-of-type 与 :last-of-type

　　从名字上看，这两个伪类的使用方法也是显而易见的。:first-of-type用来确定第一个元素的样式，而:last-of-type则相反。

　　E:only-of-type

　　关于type选择器还有一个，:only-of-type()，思考下面两个不同的选择器：
p { font-size: 18px; }p:only-of-type { font-size: 18px; }
第一种相信大家都知道：该选择器会讲样式应用到页面的所有段落；而第二种只会应用于在父元素下只有一个段落的父元素中。这里有一个显示这两种区别的Demo：single images are styled differently。

　　E:last-child

　　大家知道，:first-child伪类是属于CSS2下面的特性，但奇怪的是CSS2并没有规定于此相对应的伪类，直到CSS3中才实现了:last-child。无庸赘述，该伪类选择父元素下最后一个子元素：
li { border-bottom: 1px solid #ccc; }
li:last-child { border-bottom: none; }

　　E:only-child

　　如果一个元素是其父元素下的唯一子元素，则可以使用:only-child。不像:only-of-type，不用关心元素的类型。

　　E:empty

　　最后来介绍:empty，很直观的，该伪类选择没有子元素和内容的元素。当从数据库中返回空数据是可以使用该方法。例如：
  #results:empty { background-color: #fcc; }

　　至此，CSS3中的结构伪类就介绍完毕了。
 

下面介绍目标伪类（Target Pseudo-Class）、UI元素状态伪类（UI Element States Pseudo-Class）和否定式伪类（Negation Pseudo-Class）

目标伪类

　　E:target

　　这是一个十分好用的伪类，因为使用该方法可以根据页面链接的URL来对元素进行样式的设定，也就是说对该链接的目标进行设定。这里有个例子可以清晰的表述这个概念。使用很简单：
:target { background-color: #fcc; }
我们通过一个简单的例子来演示。比如我们在页面中常常会用到tab，之前我们要用脚本来实现，YUI、jQuery也都有这样的插件或者模块，但是现在我们用:target伪类就可以实现。
/*layout styles*/
.tab_content {
    position: absolute;/*set content box as absolute*/
 /*other layout styles*/
}
#tab1:target, #tab2:target, #tab3:target {
    z-index: 1;
}...
<ul class="tabs">
 <li><a href="#tab1">标签一</a></li>
 <li><a href="#tab2">标签二</a></li>
 <li><ahref="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content"><!--tabed content--></div>
<div id="tab2" class="tab_content"><!--tabed content--></div>
<div id="tab3"class="tab_content"><!--tabed content--></div>
就是将tab内容框设置为绝对定位，然后通过:target伪类调整其z-index。

UI元素状态伪类

　　E:enabled 与 E:disabled

　　:checked，:enabled与:disabled三个共同构成了UI元素状态的三种伪类。这样，就可以通过元素的状态进行选择。状态可以由用户（例如，input:checked），也可以由开发人员来确定（例如，input:disabled）。使用方法如下所示：
input:enabled { background-color: #dfd; }
input:disabled { background-color: #fdd; }　　这样给予用户直观的感受，哪儿可以输入哪儿不可以。

　　E:checked

　利用该伪类可以对选中的复选框或者单选按钮进行选择。例如：
input[type=radio]:checked { font-weight: bold; }

否定式伪类

　　E:not

顾名思义，该伪类可以选中除了某个特定元素以外的元素。例如：
:not(footer) { … }这样就会选中除了页脚以外的所有元素。当与输入同时使用时，会变得稍微复杂一些。
input:not([type=submit]) { … }
input:not(disabled) { … }

第一行选中除了submit按钮之外的所有元素，第二行选中所有使能的input。 
Reference: css3伪类讲解