返回顶部

css的nth-child和nth-of-type选择器

来源:无 发布时间:2016-03-19

我一直以为没有分清楚这两个选择器是怎么使用的?所以就有必要记录一下他们的使用方法了!

他们都是子选择器

他们都是选择同一个父元素下面的直接子元素。以下面的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测试的一些图片,点击可放大查看!