CSS伪类 - :nth-of-type()

CSS :nth-of-type() 伪类根据元素在其同类型兄弟元素(标签名)中的位置来匹配元素。

语法

:nth-of-type( | even | odd) {
   /* ... */
}

可能的值

odd − 此值表示从末尾开始计数的系列中所有奇数编号(例如，1,3,5…等)的兄弟元素。
even − 此值表示从末尾开始计数的系列中所有偶数编号(例如，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>

打印页面