CSS3伪类nth-of-type(n)用法详解

CSS3中nth-of-type(n)（比如nth-of-type(1)）这个特殊的类选择符可以样式更加个性的标题和段落等，不过，目前nth-of-type(n)只支持火狐3、opera、safari和chrome等部分浏览器。

如下代码：

.comments-template ol li:nth-of-type(odd) {background:#DBF1D4;}

上面的代码是指，将列表的偶数（odd）列的背景颜色设置为:#DBF1D4，如果初始化时定义列表背景颜色，就可以产生背景颜色交替变化的列表。

除了可以将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源代码为:

<ulid=“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#nthli:nth-of-type(3n+2) {
background:#DBF1D4; }

当然，完全可以使用相同的方法来样式h2标题和p段落等。