CSS :nth-of-type(n)选择器，匹配特定类型子元素

:nth-of-type(n)选择器

:nth-of-type(n)选择器可以用于匹配其父元素的第n个特定类型的子元素。该如何理解这种匹配机制呢？可以结合下方的语法及三个实例的内容：

语法及参数

A:nth-of-type(n){ 样式设置 }

提示：该选择器选择的是A选择器匹配到的元素的父元素下的第n个A类型的子元素。

---

:nth-of-type(n)选择器参数解析表：

n的值	描述
数字	指定A的父元素第n个A类型的子元素被匹配。
odd或even	odd匹配排序为奇数的A类型子元素；even匹配排序为偶数的A类型子元素。
公式	如5n匹配排序为5的倍数的子元素。

:nth-of-type(n)选择器实例代码，及在线编辑器

n为数字的实例：

<div>
  <h6>排序为1的h6</h6>
  <p class='e1'>div第二个子元素，排序为1的p元素</p>
  <p class='e1'>排序为2的p元素</p>
  <p class='e1'>排序为3</p>
  <h6>排序为2的h6</h6>
</div>
<style>
  .e1:nth-of-type(1){color:blue;}
  h6:nth-of-type(2){color:skyblue;}
</style>

试一试

n为关键字的实例

<div>
  <h6>1h6</h6>
  <p class='e2'>1</p>
  <p class='e2'>2</p>
  <p class='e2'>3</p>
  <h6>2h6</h6>
</div>
<style>
  .e2:nth-of-type(odd){color:blue;}
  .e2:nth-of-type(even){color:orange;}
  h6:nth-of-type(odd){color:skyblue;}
  h6:nth-of-type(even){color:pink;}
</style>

试一试

n为公式的实例

<div>
  <h6>壹</h6>
  <p class='e3'>段落一</p>
  <p class='e3'>段落二</p>
  <p class='e3'>段落三</p>
  <h6>贰</h6>
</div>
<style>
  .e3:nth-of-type(2n+1){color:blue;}
  h6:nth-of-type(2n){color:skyblue;}
</style>

试一试