之前，我曾写过“5个CSS3设计增强功能”一文，介绍了如何使用CSS3制作圆角、透明和文字阴影等效果。今天，我再介绍一下CSS3中nth-of-type(n)（比如nth-of-type(1)）这个特殊的类选择符的用法。
使用nth-of-type(n)可以样式更加个性的标题和段落等，不过，目前nth-of-type(n)只支持火狐3、opera、safari和chrome等部分浏览器。
如果你使用火狐或chrome浏览器，那么也许你会注意到我的博客的评论列表的背景颜色是交替变化的，奇数楼层和偶数楼层的背景颜色是不一样的，这一效果就是使用的nth-of-type(n)这个特殊的类选择符。具体代码如下：
.comments-template ol li:nth-of-type(odd) { background:#DBF1D4; }
上面的代码是指，将评论列表的偶数（odd）列的背景颜色设置为:#DBF1D4，而在之前我已经将评论列表的背景颜色设置为了#F6F8FE，所以就产生了像现在这样背景颜色交替变化的评论列表。
除了可以将n设置为odd（偶数）或even（奇数）外，还可以将n设置为表达式，比如，
nth-of-type(3n+2)
上述代码中，设n=0、1、2……，则3n+2等于2、5、8……，也就是仅样式2、5、8……所代表的元素。
nth-of-type(n)应用举例
如下192.168.1.1所在的2、5、8行的背景颜色为#9966cc
- 192.168.1.1
- 192.168.1.1
- 192.168.1.1
- 192.168.1.1
- 192.168.1.1
- 192.168.1.1
- 192.168.1.1
- 192.168.1.1
- 192.168.1.1
关于CSS伪类
CSS 伪类用于向某些选择器添加特殊的效果。
比如常见的锚伪类：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
html源代码为:
<ul id=“nth”>
<li>192.168.1.1 </li>
<li>192.168.1.1 </li>
<li>192.168.1.1 </li>
<li>192.168.1.1 </li>
<li>192.168.1.1 </li>
<li>192.168.1.1 </li>
<li>192.168.1.1 </li>
<li>192.168.1.1 </li>
<li>192.168.1.1 </li>
</ul>
CSS源代码为:
ul#nth li:nth-of-type(3n+2) {
background:#DBF1D4; }
当然，完全可以使用相同的方法来样式h2标题和p段落等。
nth-of-type延伸阅读
与nth-of-type类似的还有nth-last-of-type(n)、nth-child(n)等，请自行Google吧。
还没有订阅shuilog？您OUT啦￣▽￣
发表您的高见