css3之nth-child和nth-of-type的区别

之前一直开发的是兼容老版本的代码，所以很少用到有关c3里面的代码格式，
今天就对于使用的c3选择器中nth-child和nth-of-type做一个区分。
首先:
1.nth-child(n)：是选择父级元素下对应位置的对应子元素，n是代表第几个。
2.nth-of-type(n)：是选择父级元素下对应的元素的第几个，n代表第几个。
是不是在第一次没看懂这两句话的含义？那么这么写在结合一下你就会恍然大悟。
<div>
<h1>1111</h1>
<p>2222</p>
<p>3333</p>
</div>
同样对于去选中第一个P元素。他们的代码却是这样的
p:nth-child(2);
p:nth-of-type(1);
这就明白了把。
p:nth-child(n)的n是取决于第n个位置必须出现的p元素，再能被选中
而
p:nth-of-type(n)是取决于父级下面的p元素，的第n个。

巴特西

css3之nth-child和nth-of-type的区别

最新文章

热门文章