关于 nth-child(n)与nth-of-type(n) 的区别


此篇的由来

nth-child(n)与nth-of-type(n)好像在平时使用中并没有太大的区别,至少我之前是这么想的,直到有一次……

用法与区别

其实这两个选择器的日常的使用也不是很频繁,但是有的时候的确很好用。
不如正题:
仔细看下定义就知道两者的区别了
<!– more –>

  • nth-child(n)

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型

  • nth-of-type(n)

    :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素

其实看到这个地方大致就差多了理解了,一个是分类筛选子集,另一个则不是
下面通过具体得例子说明两者的区别

<!-- html结构 -->
<div class="demo">
  <div>这是第一个div</div>
  <div>这是第二个div</div>
  <div>这是第三个div</div>
  <h5>这是第一个h5</h5>
  <h5>这是第二个h5</h5>
  <h5>这是第三个h5</h5>
  <p>这是第一个p</p>
  <p>这是第二个p</p>
  <p>这是第三个p</p>
</div>
1.均不采用限制元素
/* 均不采用限定元素 */
/* 设置红色背景 */
.demo :nth-child(3) {
  background: #f00;
}
/* 设置绿色背景 */
.demo :nth-of-type(2) {
  background: #0ff;
}

具体页面效果如下图

注意两者的前面都没有加限制元素,所以两个表达的意思分别是:
.demo :nth-child(3):选择demo类的第3个子元素
.demo :nth-of-type(2):选择demo类中每个元素类型的第二个元素,所以第二个div,第二个h5,第二个p都会被选中

2.采用限制元素
/* 均不采用限定元素 */
/* 设置红色背景 */
.demo p:nth-child(3) {
  background: #f00;
}
/* 设置绿色背景 */
.demo p:nth-of-type(2) {
  background: #0ff;
}

具体页面效果如下图

现在的情况就有意思了,来看下具体的原因:
.demo p:nth-child(3):选择demo类的p元素且其是第3个子元素,很显然不存在这样的元素,所以选择失败,自然也就没有元素节点的背景色被设置成红色
.demo p:nth-of-type(2):选择demo类中的第2个p元素

总结

ele:nth-child(n)选择器简单的理解就是:
是指定的ele类型同时还是第n个子元素,满足这两个条件就可以选择到,否则就无法选择

ele:nth-of-type(n)选择器简单的理解就是:
选择父元素的第n个指定元素ele类型的子元素

原创文章,转载请标明出处。

IT文库 » 关于 nth-child(n)与nth-of-type(n) 的区别
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址