The difference between nth-child and :nth-of-type

WBOY
Release: 2016-08-26 10:13:17
Original
1341 people have browsed it

Why is:nth-of-type called:nth-of-type? Because it is distinguished by "type". That is to say: ele:nth-of-type(n) refers to the nth ele element under the parent element,

and ele:nth-child(n) refers to the nth element under the parent element and this element is ele , if not, the selection fails.

Example:

 

1

  

1

  

2

.box p:nth-child(1){

 Color:red; //Selection failed because the first child element under .box is not p

}

.box p:nth-child(2){

 Color:red; //The selected element is

1

}

.box p:nth-child(3){

 color:red; //The selected element is

2

}

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

 color:red; //The selected element is

1

}

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!