今天看到:nth-child和:nth-of-type的时候突然发现自己好像忘记了,于是就写下来,便于以后自己查看,有错误的地方还希望大家指正.
首先解释一下字面意思吧:这两个都是css3中的伪类选择器,selector(这个通常为标签选择器):nth-child(n)表示的是选择某个父元素中的第n个子元素,并且这第n个子元素是该selector元素,否则就选择不了。 selector(这个通常为标签选择器):nth-of-type(n)表示选择某个父元素中的第n个selector元素。
<div class="demo">
<ul>
<li>我是ul下的第一个元素,也是第一个li元素</li>
<p>我是ul下的第二个元素,也是第一个p元素</p>
<li>我是ul下的第三个元素,也是第二个li元素</li>
</ul>
</div>
.demo ul li:nth-child(1)选择是ul的第一个元素,并且是一个li元素,符合,所以选择成功。
.demo ul li:nth-child(2)选择是ul的第二个元素,并且是一个个li元素,不符合,所以选择不成功。
.demo ul p:nth-child(2)选择是ul的第二个元素,并且是一个p元素,符合,所以选择成功。
.demo ul li:nth-child(3)选择是ul的第三个元素,并且是一个li元素,符合,所以选择成功。
.demo ul li:nth-of-type(1)选择的是ul下的第一个li元素
.demo ul li:nth-of-type(2)选择的是ul下的第二个li元素
.demo ul p:nth-of-type(1)选择的是ul下的第一个p元素