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

WBOY
Lepaskan: 2016-08-26 10:13:17
asal
1365 orang telah melayarinya

: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

 

}

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan