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

nth-child和nth-of-type是比较常用的一个伪类选择器,过去一直没在意这个,今天发现原来他们之间还有这样的区别,记录一下。

我们首先来看MDN上对它们的解释:

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)
:nth-of-type(an+b) 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

注:注意不能使用b+an的形式,必须是an+b的形式,即n必须在最前面,n从0开始取值,为0,1,2…

从上面的描述似乎不容易看出区别,我们用例子来说明:
这是html结构,下面的css均是以这个html为基础

<section>
   <div>我是1号divdiv>
   <div>我是2号divdiv>
   <div>我是3号divdiv>
   <p>我是1号pp>
   <p>我是2号pp>
   <p>我是3号pp>
section>
<div>
   <span>我是1号spanspan><span>我是2号spanspan>
div>

第一个例子:

section div:nth-child(2) {
  color: red;
}

section div:nth-of-type(3) {
  color: blue;
}

nth-child和nth-of-type的区别_第1张图片
效果图1

从上图可以看出他们都很好的选中了对应的元素,这里还看不出他们有什么区别。好的,我们再看第二个例子:

section p:nth-child(2) {
	color: red;
}

section p:nth-of-type(3) {
    color: blue;
}

nth-child和nth-of-type的区别_第2张图片
效果图2

咦?为什么第二个p标签没有变色?为什么nth-child不起作用但是nth-of-type却可以呢?这里我们就需要理解这两者的原理了。浏览器在生成css渲染树的时候,对于选择器的处理是从右到左的(关于原因可以看我的笔记)。那么对于section p:nth-child(2),首先浏览器会在dom树中寻找所有子元素,将他们一一排序,然后再找到其中的第二个元素,找到第二个元素后,再选择其中的p标签。最后再查看父级元素是不是section元素。我们现在来看看html结构,发现子元素有p标签div标签span标签(这里不考虑body标签和html标签),好的,给他们一一编号,注意这个编号是在同一个父级元素里面的子元素之间进行,这样我们可以知道第一个p标签其实是4号。也就是说nth-child(2)选中的元素有divspan,没有p标签。所以p:nth-child(2)自然就得不到结果了。所以样式不起作用。那么nth-of-type怎么就可以选中呢?这是因为nth-of-type的编号比nth-child多了一个限制条件,那就是它编号的是同类标签。也就是说,找到dom树中的子元素后,先按照同类标签分类,再对每类标签从1开始编号,这样编号结果其实就和标签里面的数字编号一致了。因此就可以得到上面的结果啦。
为了更好的体现出nth-child的特性,再举几个例子:

:nth-child(2) {
   background-color: blue;
}

大家说这个效果是什么呢?效果是这样的:
nth-child和nth-of-type的区别_第3张图片
效果图3

是不是吓一跳?怎么全变蓝呢?其实根据上面的分析,我们可以发现bodyhtml的第二个子元素,知道这一点就不奇怪了。
再看下面这个:

:nth-of-type(2) {
   color: blue;
}

nth-child和nth-of-type的区别_第4张图片
可以看到所有2号元素都变蓝了。表示选中了所有同类元素里面的第二个元素。

以上。

你可能感兴趣的:(css,css)