Home > Web Front-end > HTML Tutorial > A little knowledge about first-child

A little knowledge about first-child

零下一度
Release: 2017-06-24 13:58:49
Original
1606 people have browsed it

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>
Copy after login

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>
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template