Today I wrote a CSS test sample, the code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>pseudo-class selector</title> <style type="text/css"> .div-01:last-child{ color: red; } </style> </head> <body> <div class="div-01"> <p class="p-01"> same </p> </div> <div class="div-01"> <p class="p-01"> Chi </p> </div> <div class="div-01"> <p class="p-01"> they </p> </div> <p> pungent </p> <p> bitter </p> </body> </html>
I thought that the selector would select
<div class="div-01">
<p class="p-01">
they
</p>
</div>
But the result is beyond my expectations, let's re-understand the meaning of the last-child selector in the CSS standard
:last-child p:last-child Selects each <p> element that is the last child of its parent.
Select the last child element of its parent element, each <p> element, according to this paragraph, can we find out: the parent element corresponding to div-01 is body, and the last child element of body is
<p>
bitter
</p>
And my selector is:
.div-01:last-child
The class corresponding to p does not match the selector, so naturally it cannot be selected.