:nth-child和:nth-of-type的区别

:nth-child和:nth-of-type的区别

1. :nth-child定义：:nth-child() 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序。

/*css部分*/
ul li {
		list-style: none;
		width: 200px;
		height: 30px;
		margin: 5px;
	}
	li:nth-child(1) {
		background: pink;
	}
	/*body部分*/
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

上面这串代码会为第一个li添加样式。
但当在ul中添加一个a标签的时候，分两种情况，第一种在li前面添加，第二种情况在li后面添加。
即：

 <ul>
		<!-- 第一种情况 -->
		<a href="#">111</a>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
</ul>
	 <ul>
		<!-- 第二种情况 -->
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<a href="#">111</a>
	</ul>

发现什么呢？第一种情况下为第一个li添加样式无效了，第二种情况有效，因为第一种情况系统匹配的是li的父元素下面的所有子元素，li:nth-child(1)下面的第一个子元素已经不是li而是a，所以这时候设置当然没有效果，那么怎么解决这个问题呢？:nth-of-type
2. :nth-of-type()选择器是匹配的所有同级的li元素，这样不管你怎么添加别的元素，都不影响我匹配的li。