CSS3属性选择符介绍

:CHECKED伪类
:checked伪类允许开发者为处于选中状态的checkbox和radio设定样式。当然这也要在浏览器允许改变表单控件外观的条件下。下面的CSS规则将会使选中的radio和checkbox元素显示一个绿色边框：
input:checked { border:1px solid #090; }
UI元素状态伪类目前可以在Opera和基于Mozilla的浏览器中使用。
要注意的是，许多浏览器对于开发者对表单控件样式的改变有着严格的限制。更多关于这方便的内容可以我的两篇文章：《样式化表单控件》和《样式化更多表单控件》。
结构性伪类
结构性伪类允许开发者根据文档树中表明的结构来指定元素，而这些使用简单选择符或者是混合选择符都无法做到。结构性伪类功能十分强大，但是不幸的是现代浏览器仅提供了有限的支持。
:ROOT伪类
:root伪类指向的是文档的根元素。在HTML中，文档的根元素始终是HTML，也就是说现在的两条规则其实是一样的（大体上说来:root要比html更专业点）。
: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）

最新评论