about: Nth-child and: Nth-of-type The difference has not been too much attention. Recently intends to dig deeper into some CSS3, only to discover inside actually hidden mystery.
: Nth-child can select the Word element under the parent element: Nth-of-type can also. But what difference do they have?
In fact the difference is very simple:: Nth-of-type Why to call: Nth-of-type? Because it is differentiated by "type". In other words: Ele:nth-of-type (n) refers to the nth ele element under the parent element,
ele:nth-child (n) refers to the nth element under the parent element and the element is ele, if not, the selection fails.
A small example is attached here:
The code is as follows:
<div>
<ul class= "Demo" >
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</div>
In This example, the. Demo Li:nth-child (2) selects the <li>one</li> node, and the. Demo Li:nth-of-type (2) is selected <li>two</li > node. Original: http://www.jb51.net/css/142398.html
CSS3: Nth-child and: The difference of nth-of-type in depth understanding
