我一直以为没有分清楚这两个选择器是怎么使用的?所以就有必要记录一下他们的使用方法了!
他们都是子选择器
他们都是选择同一个父元素下面的直接子元素。以下面的dom结构为例:
<div id="dom1">
<a href="javascript:void(0);" title="#">链接一</a>
<a href="javascript:void(0);" title="#">链接二</a>
<p>内容一</p>
<p>内容二</p>
<p>内容三</p>
<p>内容四</p>
<p>内容五</p>
<p>内容六</p>
<p>内容七</p>
</div>
现在我们需要选择id为dom1的子元素中从内容三开始的所有p元素,并让背景为红色,字体颜色为白色。如果我们像下面这样写css;
#dom1 p:nth-child(n+3){background-color:red;color:#fff;}
结果确是下面这样,并不是我们所想要达到的效果!
链接一
链接二
内容一
内容二
内容三
内容四
内容五
内容六
内容七
我们愿意本来是下面这样:
链接一
链接二
内容一
内容二
内容三
内容四
内容五
内容六
内容七
那怎么才能达到我们想要的结果呢?其实我们只要将css更改如下就能实现我们想要的结果了!
#dom1 p:nth-child(n+5){background-color:red;color:#fff;} 或者
#dom1 p:nth-of-type(n+3){background-color:red;color:#fff;}
原来nth-child选择器传进去的参数表示的是选择从父元素的子元素中第xx项开始的xx元素,如果刚好xx元素不存在,那么这个css也会无效的。比如上面的例子,如果我css像下面这样写,就会没有效果,因为第一项不是p元素。
#dom1 p:nth-child(1){background-color:red;color:#fff;}
可是如果我们像下面这样写,就会达到想要的效果!
#dom1 p:nth-of-type(1){background-color:red;color:#fff;} 或
#dom1 p:nth-child(3){background-color:red;color:#fff;}
我们以选择器 fatherElement p:nth-child(n+5)和fatherElement p:nth-of-type(n+5)为例来总结他们之间使用特点:
1、两个都是选择p元素;
2、父元素都是fatherElement;
3、fatherElement p:nth-child(n+5)表示选择从fatherElement的所有子元素不分类别的第5项,包括第5项在内之后的所有p元素;fatherElement p:nth-of-type(n+5)表示的在fatherElement的所有子元素为p的子元素中选择第五项包括第五项的p元素,由这里知道选择器把查找区间划分为所有子元素为p元素;
4、nth-child不分子元素的种类,nth-of-type分子元素的种类。
通项式的特点
1、经常需要为从某项开始的子元素设置样式,比如从第三项,则传入的参数为n+3;可是发现一个问题,如果把n+3写成3+n就会没有效果了,进过测试,在支持这两个的选择器的浏览器中,如果传入的通项包括n的话,这需要把n写在前面。
2、通项式中n是0开始的,但最终选择器选择的项数是通项计算出来的结果,没有项数为0的项!
下面是w3c测试的一些图片,点击可放大查看!