24. CSS3 :nth-of-type(n)选择器

:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用:nth-of-type(n)选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在:nth-of-type(n)选择器中的“n”和:nth-child(n)选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

示例演示

通过:nth-of-type(2n)选择器，将容器 div.wrapper 中偶数段数的背景设置为橙色。

HTML 代码：

<div class="wrapper">
  <div>我是一个 Div 元素</div>
  <p>我是一个段落元素</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
  <div>我是一个 Div 元素</div>
  <p>我是一个段落</p>
</div>

CSS 代码：

.wrapper > p:nth-of-type(2n){
  background: orange;
}

效果如下：

以上关于24. CSS3 :nth-of-type(n)选择器的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。