CSS :nth-of-type（） 伪类根据元素在相同类型的同级（标签名称）中的位置来匹配元素。
语法
:nth-of-type( | even | odd) {
/* ... */
}
可能的值
- 奇数 − 此值表示从末尾开始计数的系列中的所有奇数（例如，1,3,5..etc）同级元素。
- 偶数 − 此值表示从末尾开始计数的系列中的所有偶数（例如，2,4,6...等）同级元素。
- 函数表示法 （<an+b>） − 此值表示从其父容器的末尾开始计数的序列中的每个 an+b 子元素，其中 a 是正整数，n 是从 0 开始的计数器变量。b 是另一个正整数。
CSS :nth-of-type（） 示例
下面是一个如何使用 :nth-of-type（） 选择器来设置第二个 span 元素的样式的示例 -
<html>
<head>
<style>
span:nth-of-type(2) {
background-color: pink;
color: blue;
}
</style>
</head>
<body>
<p>This is a <b>p</b> tag. </p>
<span>This is first <b>span</b> tag.</span>
<p>This is a <b>p</b> tag. </p>
<span>This is second <b>span</b> tag</span>
<p>This is a <b>p</b> tag. </p>
</body>
</html>
以下是如何设置奇数段落样式的示例 -
<html>
<head>
<style>
p:nth-of-type(2n+1) {
background-color: pink;
color: blue;
}
</style>
</head>
<body>
<p>This is first <b>p</b> tag. </p>
<div>This is first <b>div</b> tag.</div>
<p>This is second <b>p</b> tag.</p>
<p>This is third <b>p</b> tag.</p>
<p>This is fourth <b>p</b> tag.</p>
<div>This is second <b>div</b> tag..</div>
</body>
</html>
