代码: :root { background:#ff0; }
html { background:#ff0; }

:NTH-CHILD()伪类

:nth-child()伪类指向的元素在文档树中有一定数量的兄弟元素存在。其中括号内的参数，可以是一个数字，也可以一个关键字或者一个公式。
数字b指是的第b个子元素。下面的规则将会应用到父元素下所有p元素中的第三个中：

代码: p:nth-child(3) { color:#f00; }

关键字odd（奇数）和even（偶数）可以用来匹配序号为奇数或者是偶数的子元素。第一个元素的序号为1，因为下面的规则将会匹配第1、3、5...了子元素p：

复制内容到剪贴板 代码: p:nth-child(odd) { color:#f00; }

下面的规则则匹配第2、4、6...个字元素p：

代码: p:nth-child(even) { color:#f00; }

表达式an+b可以用来创建更加复杂的循环模式。在表达式中，a代表步长，n是一个从0开始的计数器，b代表偏移量。其中，所有的数值都必须是整数（这里，n是从0开始的，和js等中的循环不同的是，至于到多少结束取决于元素的个数决定，如文档中有20个元素，3n(n=1,2...)就会分别选择第3、6、9、...18个元素，n此时为6 ，dudo注）。为了更好理解如何使用表达式我们先看几个代码实例：

下面的规则将会匹配序号数为3的倍数的所有p元素。在第一行中，b等于0，因此可以忽略不写（见第二行）：

代码: p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }

偏移量可以用来指定样式的循环是从哪个元素开始应用的。如果有一个20行的表格，我们希望从第10行以后的奇数行开始使用不同的背景颜色，就可以使用下面这条规则：

代码: tr:nth-child(2n+11) { background:#ff0; }

由于n是从为开始的，因此第一个受影响的tr元素的序号是11（2*0+11＝11,dudo注）。接下来就是第13行（2*1+11=13）再接下来就第15行（2*2+11＝15），以此类推。

更详细介绍请参照CSS 3选择符中的《nth-child()伪类》。

那么，对于这样有用的一个选择符又有哪些浏览器支持它呢？很糟糕，据我所知，没有一个浏览器支持这个选择符甚至没有浏览器支持nth类的选择符。如果有的话请帮我指正（Firefox3和IE8目前是否支持？dudo）

:nth-of-type()

:nth-of-type()伪类和nth-child()伪类找使用方法十分相似，只不过他匹配的是规则中指明类型的元素。下面的规则将会匹配每个属于父元素中第三个子元素的p元素（属于第3个子元素的p在一个该当中可能会有很多，只不过他们位于不同的父元素下，dudo注）：

代码: p:nth-of-type(3) { background:#ff0; }

当你想确定是否已经指向了第三个p元素，这种方法会很有用。开始你可能觉得这和使用nth-child效果是一样的，但是nth-child(3)会把所有的子元素都计算进来，因此结果可能就会不一样，除非p所有的所有兄弟元素也都是p元素。

:nth-of-type伪类目前还没有浏览器支持。

:nth-last-of-type伪类
:nth-last-of-type伪类指向的元素在其后还有若干同类型的元素。和:nth－last-child伪类一样，它是从最后一个子元素向回数的。下面的规则将会匹配到倒数第二个兄弟元素p中（注意：是兄弟、同级别的节点）：

代码: p:nth-last-of-type(2) { background:#ff0; }

:nth-last-of-type()目前还没有浏览器支持。

:last-child伪类

:last伪类指向的是父元素中最后一个子元素。它和:nth-last-child(1)效果是一样的。下面的规则匹配所有属于父元素中最后一个子元素的p：

代码: p:last-child { background:#ff0; }

:last-childe伪类可以在基于Mozilla的浏览器中使用。Opera不支持:last-childe伪类，在Safri中存在bug（上面的规则会匹配到所有的p元素）。令人稀奇是的它可以在OmniWeb（测试版本5.1.1）中正常使用，尽管这个浏览器是基于Safari的。这可能是因为Apple WebKit最新版本的回归，因为OmniWeb使用的WebKit通常要比Safari版本稍微低一点。

:first-of-type伪类
:first-of-type伪类指向同类型元素中的第一个元素。它和:nth-of-type(1)是一样的。

代码: p:first-of-type { background:#ff0; }

:first-of-type伪类目前还没有浏览器支持。

:last-of-type伪类
:last-of-type伪类指向同类型元素中的最后一个元素。它和nth-last－of-type(1)是一样的。

代码: p:last-of-type { background:#ff0; }

:last-of-type伪类目前还没有浏览器支持。

:only-child伪类
:only-childe伪类指向的是那些父元素中再没有其他任何子元素的元素。它和:first-child:last-child或者:nth-child(1):nth-last-child(1)是一样的（后者不够专业、简明）。

代码: p:only-child { backgound:#ff0; }

:only-childe伪类目前可以在基于Mozilla的浏览器中使用。在Safari似乎被解释成了:first-child（上面的规则会被匹配到文档中所有第一个子元素p中）。

:only-of-type伪类
:only-of-type伪类指向的是那些父元素中再也没有与之类型相同的子元素。这和:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)相同（后者专业性不够）。

代码: p:only-of-type { background:#ff0; }

:only-of-type伪类目前还没有浏览器支持。

:empty伪类
:empty伪类指向没有任何子元素的元素。其中包括text节点，因此下面的示例只有第一行是空元素。

代码: <p></p>
<p>text</p>
<p><em></em></p>

下面的规则只匹配第一行的p元素：

代码: p:empty { background:#ff0 }

:empty伪类目前被基于Mozilla的浏览器支持。Safari会错误地把样式应用到所有指定的元素中去。

否定伪类
否定伪类写成:not(s)，参数s为简单选择符。它指向的是除简单选择所指向的元素以外的所有元素。例如，下面的CSS将会指向所有不是p的元素：