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>