A little knowledge about first-child

When I was reading the book "Sharp jQuery" today, I saw the section on filter selectors. There is a knowledge point that caught my attention.

(I don’t use the exact same code in the book as an example) Give a simple example - code:

1 <ul>2     <li>第一个li</li>3     <li>第二个li</li>4     <li>第三个li</li>5     <li>第四个li</li>6 </ul>

If you want the first li The color is blue, and the method given in the book is $("ul :first-child").css("color","blue");

(ps: I used jQuery is introduced online: )

My first reaction at this time was that the sentence $("ul:first-child") selected ul, not his son li. I looked for examples on the Internet and found that the common way to write this situation is: $("ul li:first-child").

Then the book Is the writing method above wrong? I tried it on the editor and found that it was correct. It turned out that the key problem occurred in ul# of $("ul :first-child") There is a space after ##! If the spaces are removed, ul is really selected!

Forehead. . . This detail. . . . Is it better to use ul+space or ul li in the future? This may be necessary haha. After all, $("ul :first-child") has one more li than $("ul li:first-child")! The conditions are even more stringent! Change the example

<ul> <p>lala</p> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li></ul>

In the same situation, $("ul :first-child").css("color","blue") Compared with $("ul li:first-child").css("color","blue"), the former lala turns blue, and the latter has no effect. After all, li is not the first son (he can't be a prince haha) .

first-child and first-of-type, well, I saw the article written by someone, it is quite clear, and the address is attached:

Well, to put it simply, the former is about the son, and the latter is about the same element forming a group and which one is in the group. It will be clear after adding what I mentioned earlier about paying attention to spaces.

The above is the detailed content of A little knowledge about first-child. For more information, please follow other related articles on the PHP Chinese website!