jquery selector: first-child and :last-child cannot get the solution to the element

Let's introduce how to solve this problem through actual code examples. 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 a tag with class button, then according to what we know CSS3pseudo-class, you can easily write the following code

.button:last-child {
    background-color: #ffd700;
}

After running it, I found that the background color of the second a did not change color. After thinking about it, the CSS code must be correct. There must be something wrong with the HTML. After several modifications, I found that the HTML and CSS can be changed to this.

<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 suddenly realized that first-child and last-child are indeed very arrogant and willful. If the child elements in the father element contain other different tags, they are Very disobedient.

Summary

So what did they listen to and what did they not listen to? After some testing, I came to the conclusion that

When using first, the first child The elements must have the same tag. The middle and last can be different,
last is the opposite, the last element must be the same, the front and middle can be different

The above is the content carefully prepared for you by the editor of Yunqi Community, in Yunqi The community's blogs, Q&A, official accounts, characters, courses and other columns also have relevant content. You are welcome to continue to use the Search button in the upper right corner to search for css. The tag codes are firstchild lastchild and jquery last child. , jquery firstchild, jquery first child, jquery first last, so that you can get more relevant knowledge.

The above is the detailed content of jquery selector: first-child and :last-child cannot get the solution to the element. For more information, please follow other related articles on the PHP Chinese website!