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