(CSS): Last-child and: Last-of-type difference

Compare the description of the pseudo-class selector in W3cschool: Last-child and: Last-of-type, as follows:

: Last-child      p:last-child      selects each <p> element that belongs to the last child element of its parent element. : Last-of-type    p:last-of-type    selects each <p> element that belongs to the last <p> element of its parent element.

To tell the truth, in the two relations do not understand the time, the more you look at the two descriptions, the more awkward, around the mouth, difficult to understand, to read the information on the Internet to understand after, I think that said is quite reasonable.

Take a piece of code for example:

<! DOCTYPE html>{            color:  Red;        }         p:last-of-type{            color: blue;        }     </style>

The result of the run shows that no row is shown in red and the third line is blue. Perhaps you might think that the two selector is the same row, but when you comment out the blue selector you will find that the red is still not selected.

In fact, the reason why red is not selected is very simple, the previous article has been said, here is a simple description

: Last-child selects the last child node of the parent node and matches the selector, the last node of the parent Div is span, and the matching selector is P, which does not correspond so it does not match.

and a different selector.

: Last-of-type is looking for the last child node in the parent node that is the same as the selector, that is, this is not the last node, but the last P-element node, so only the third row can be found.

(CSS): Last-child and: Last-of-type difference