欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-07 08:28:12
...
:nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素,

而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。

例:

 

1

  

1

  

2

.box p:nth-child(1){

  color:red; //选择失败,因为.box下面的第一个子元素不是p

}

.box p:nth-child(2){

  color:red; //选择的元素是

1

}

.box p:nth-child(3){

  color:red; //选择的元素是

2

}

.box p:nth-of-type(1){

  color:red; //选择的元素是

1

}