浅析nth-child、nth-of-type的区别

浅析nth-child、nth-of-type的区别

nth-child 和 nth-of-type是CSS的两个伪选择器。要对相同位置或相似做操作的时候非常有用。前者的字面意思是选择第几个子元素，后者的字面意思是选择某类型的第几个元素。
首先来看他们的完整格式。

selector:nth-child(an+b)    /* 如 tr:nth-child(3), p:nth-child(2n+1) */
selector:nth-of-type(an+b)   /* 如 p:nth-of-type(3), .info:nth-of-type(2n) */

selector可以是标签名，也可以是类名，后面的数字从1开始计数。
下面用例子说明：

<style>
		  p:nth-child(2),p:nth-child(4){        /*在块内，先找绝对位置的第几个元素，然后匹配标签是否符合*/
		    color:red;
		  }
		  .ph:nth-of-type(4){                   /*在块内，同一类型叠加寻找，然后匹配标签是否符合*/
			  color: #0000FF;
		  }
</style>
            <p class="ph">ph1</p>
		    <span class="ph">span1</span>
		    <p class="info">ph2</p>
		    <p class="info">ph3</p>
		    <p class="ph">ph5</p>
			<span class="ph">span2</span>
			<span class="ph">span3</span>
			<span class="ph">span4</span>
			<span class="ph">span5</span>
		```
```css
在这里插入代码片

结果显示：

解释：p:nth-child(2),p:nth-child(4)会按照顺序找到所需的第几个元素，这里是第二个和第四个，分别为span class=“ph”>span1</span和 p class=“info”>ph3</p，然后在和选定的类型对比，这里选择的p，只有第二个配对成功，颜色改变。
.ph:nth-of-type(4)则会先找到一类符合要求的元素，这里nth-of-type(4)表示找到相同标签的第四个元素，分别为p class=“ph”>ph5</p和span class=“ph”>span5</span，然后在和选定的类型对比，这里选择的.ph，两个都配对成功，颜色改变。

再写一个例子，加深理解。

<style>
			p:nth-of-type(4) {
				color: #FF0000;
			}

			p:nth-child(1),p:nth-child(3),p:nth-child(4){
				color: #0000FF;
			}
</style>
<div>
			<p>11</p>
			<p>22</p>
			<p>33</p>
			<p>44</p>
</div>
<div>
			<p class="test">p1</p>
			<span class="test">span1</span><br>
			<p class="test">p2</p>
			<span class="test">span1</span><br>
			<p class="test">p3</p>
			<span class="test">span1</span><br>
			<p class="test">p4</p>
			<span class="test">span1</span><br>
</div>

注意：在这个例子中 br 标签，在nth-child中的影响。

借鉴：https://www.cnblogs.com/10yearsmanong/p/13071322.html