细说CSS3中的选择符(3)

:CHECKED伪类
:checked伪类允许开发者为处于选中状态的checkbox和radio设定样式。当然这也要在浏览器允许改变表单控件外观的条件下。下面的CSS规则将会使选中的radio和checkbox元素显示一个绿色边框： IT教学网

input:checked { border:1px solid #090; } IT教学网

UI元素状态伪类目前可以在Opera和基于Mozilla的浏览器中使用。 Webjx.Com

要注意的是，许多浏览器对于开发者对表单控件样式的改变有着严格的限制。更多关于这方便的内容可以我的两篇文章：《样式化表单控件》和《样式化更多表单控件》。

IT教学网

结构性伪类

结构性伪类允许开发者根据文档树中表明的结构来指定元素，而这些使用简单选择符或者是混合选择符都无法做到。结构性伪类功能十分强大，但是不幸的是现代浏览器仅提供了有限的支持。

:ROOT伪类
:root伪类指向的是文档的根元素。在HTML中，文档的根元素始终是HTML，也就是说现在的两条规则其实是一样的（大体上说来:root要比html更专业点）。 Webjx.Com

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

Webjx.Com

:NTH-CHILD()伪类

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

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

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

Webjx.Com

p:nth-child(odd) { color:#f00; } IT教学网

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

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

IT教学网

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

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

p:nth-child(3n+0) { color:#f00; } 
p:nth-child(3n) { color:#f00; } IT教学网

偏移量可以用来指定样式的循环是从哪个元素开始应用的。如果有一个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），以此类推。 Webjx.Com

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

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