Let's use the actual code example to explain how to solve this problem if we have the following HTML code
<a href= "#" class= "button" ><</a>
<a href= "#" class= "button" >></a>
<div id= "F" >F</div>
<div id= "S" >S</div>
<div id= "T" >T</div>
We need to find the last one with the class button, so we can easily write the following code based on the CSS3 pseudo class we know
. button:last-child {
Background-color: #ffd700;
}
After the run found that the second a background color does not change, think of the CSS code must be right, it must be the HTML where there is a problem, after several changes found, HTML and CSS changed to this can be.
<div>
<a href= "#" class= "button" ><</a>
<a href= "#" class= "button" >></a>
</div>
<div id= "F" >F</div>
<div id= "S" >S</div>
<div id= "T" >T</div>
<style>
Div. button:last-child {
Background-color: #ffd700;
}
</style>
At this time I realized, First-child and last-child These 2 are very proud jiao is very capricious, if the father element in the child elements contain other different label, they 2 is very disobedient.
Summarize
So what exactly are they listening to, and after my test, I conclude that
The first child element must be of the same label when it is used. The middle and the last can be different,
Last on the contrary, the final element should be the same, the front and the middle can be different