CSS - 伪类

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>