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

最新推荐文章于 2025-06-10 22:23:59 发布

穿越雾水123

最新推荐文章于 2025-06-10 22:23:59 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/u013864585/article/details/32709737

css 专栏收录该内容

17 篇文章

订阅专栏

本文深入探讨了CSS3中nth-of-type(n)选择符的高级用法，包括如何利用它实现背景颜色的交替变化，并通过表达式设置样式。同时，还介绍了CSS伪类的基本概念及其在不同场景下的应用，如为链接添加不同状态的颜色变化。并通过HTML和CSS代码示例展示如何将这些概念应用于实际网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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