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

Nth-child and Nth-of-type are CSS3 in the new pseudo-class selector, in all fairness, the peacetime use of nth-child more, sometimes encounter some unexpected situation, but also changed to forget, and did not delve into, so that before today, I also dumb think nth-of-type than nth-child to strict, after all, people have a type.
uppercase embarrassing ....
Well, I'm ashamed of my superficial understanding ...

Online about Nth-child and Nth-of-type difference content is not much, can be found is not very satisfied, maybe everyone is like me superficial understanding, also may be because people think this knowledge point is not important, so there is no further in-depth study.
The wood of encircle, born in Homer, is a nine-storey platform, starting from the tired soil;

The basic code for this example is as follows:

<!

        DOCTYPE html>  
The effect is as follows:

In the following example, always use this code as the standard, only add CSS styles, the DOM section is unchanged.

Now we start with an example to see the effects of different pseudo class selectors: 1.: Nth-child

<style> .....
    Box:nth-child (2) {
        background:yellow;
    }
</style>
 
The effect is as follows:

When we use Nth-child, we do not specify a type before it, and now we select the second child element under. Box. 2,: Nth-of-type.

<style> .....
    Box:nth-of-type (2) {
        background:yellow;
    }
</style>
 
The effect is as follows:

The second P tag and the second div tag are selected.
Conclusion 1: When you do not specify a type, Nth-child (n) selects the nth child element under the parent element. Nth-of-type (n) selects the nth of the different types of labels under the parent element.  3, div:nth-chiid.

<style> .....
    Box Div:nth-child (2) {
        Background:yellow
    }
</style>
 
The effect is as follows:

No elements are selected.

Try P:nth-child (2);

<style> .....
    Box P:nth-child (2) {
        Background:yellow
    }
</style>
 
The effect is as follows:

The second child of the. Box is selected, and the label for this child element is P. 4, Div:nth-chiid.

<style> .....
    Box Div:nth-of-type (2) {
        Background:pink
    }
</style>
 

The second child element of the DIV tag under box is selected.

conclusion 2:ele:nth-child (n) requires more than the nth child element, and the label of this child element is ele. Ele:nth-of-type (n) selects the use and Nth-child (n) of the second 5, Nth-last-child (n), and Nth-last-of-type (n) of the Ele label under the parent element. The Nth-of-type (n) usage is the same, and the only difference is that Nth-last-child (n) is the inverse nth element. Nth-last-of-type (n) is the reciprocal nth label.  6, Last-child

<style> .....
    Box p:last-child{
        background:yellow;
</style>
 
The effect is as follows:

No elements are selected because the last child node under the parent element is not a P tag.

If you do not specify an element type:

<style> .....
    box:last-child{
        background:yellow;
    }
</style>
 
The effect is as follows:

There are three elements selected, because these three elements are the last child element under their upper-level parent element. 6, Last-of-type

<style> .....
    Box p:last-of-type{
        background:pink;
</style>
 
The effect is as follows:


The last of the P tag under the parent element is selected.

<style> .....
    box:last-of-type{
        background:pink;
    }
</style>
 
The effect is as follows:


The last of the different types of labels under the parent element is selected.

conclusion 3:ele:last-child selects the last child element under the parent element, and the label of the child element must be ele, otherwise none is selected. Ele:last-of-type selects the last Ele label under the parent element. 7, Ele:first-child, Ele:first-of-type and Ele:last-child, Ele:last-of-type exactly the opposite.

 Simple application: 
 

<!

        DOCTYPE html>  
Effect:
Extension:

As we all know: nth-child (2n) is selected even child elements
But what if we want to select the first 6 child elements.
You can use Nth-child (-n+6)

<style> ...
    Tbody Tr:nth-child (-n+3) {
        background:yellow;
    }
</style>
 
Effect:

Select from the third start

<style> ...
    Tbody Tr:nth-child (n+3) {
        background:yellow;
    }
</style>
 
Effect: