: First-child and: last-child learning Notes

I was curious about a small problem I found when I was tossing the topic.

First, we will introduce the first-child pseudo class, that is, selecting the first object.

For example:

<Div class = "loop"> Test </div>
<Div class = "loop"> Test </div>
<Div class = "loop"> Test </div>
In css, you can use. loop: first-child to define a style for the first layer. Similarly, you can use. loop: last-child to define the last layer separately.
Problems
If you add a line below:

<Div class = "loop"> Test </div>
<Div class = "loop"> Test </div>
<Div class = "loop"> Test </div>
<Div> I don't have any styles to confuse </div>
The. loop: last-child will expire and will not act on any div. Similarly, if a div is added to the front,. loop: first-child will also become invalid.

Solution
Use a div to wrap all. loop, namely:

<Div>
<Div class = "loop"> Test </div>
<Div class = "loop"> Test </div>
<Div class = "loop"> Test </div>
</Div>
<Div> I don't have any styles to confuse </div>
So. loop: last-child is effective, and. loop: first-child.

Supplement
Depending on the structure, in some cases, the last-child failure may occur only. In short, as long as there is a problem between the two, it is very likely that the layer using this style is not fully wrapped.