The sub-element filter selector in jquery, the difference between space and no space

Source: Internet
Author: User

Recently learning jquery, found that its selector of the wording of the CSS and the basic syntax is very similar, plus the space difference is very large.
$ (": first-child)--:first simply returns a single element, and the First-child selector matches the first child element for each parent element.

such as child element filter selectors

Li:first-child (without spaces), where the parent element refers to the parent element of the Li tag;
Li:first-child (plus space), this time because it becomes the ance desc hierarchy selector (similar to the parent-child selector, just larger than its scope), so its parent element refers to the Li tag, but because the LI element has no child elements, so the expression is not correct. It can be changed to ol.
$ ("Li:first-child"), gets the first LI element in the two UL parent element, and uses the CSS () method to modify the text color they display on the page.

<! DOCTYPE html>  

$ ("Ol:first-child"): There is a space in the middle, OL is the parent element, representing the first sub-element of the OL set;
$ ("Li:first-child"): There is no space, which means that Li is a child element, the parent element is the parent element of Li, and the first child element of the parent element that is the first child element of Li is selected. A bit of a mouthful, in short, no space, meaning that Li must be the first child element of the parent element.
For example:

<! DOCTYPE html>

As follows: The H2 of the second Div does not turn green, because he is not a div first-child

Attach the CSS selector:

1.id Selector (# myID)

2. Class selector (. myclassname)

3. Tag Selector (Div, H1, p)

4. Adjacent selector (H1 + P)

5. Sub-selector (ul > Li)

6. Descendant selector (Li a)

7. Wildcard selector (*)

8. Property selector (A[rel = "external"])

9. Pseudo-Class selector (a:hover, Li:nth-child)

The priority level is:
!important > ID > Class > tag
Important is higher than inline priority, but is higher in inline than ID

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.