Currently there are four main selector: combination selector, pseudo-class selectors, selectors structural pseudo-class, pseudo-element selector. Each type of specific use of the following selectors:
A combination of the selector
Priority Selector combination:
Inherit the lowest priority, so relatively little priority to be compared on the basis of precise control elements on.
1, the number of the first number comparing id high, high priority
2, if id is equal to the number, the number of class comparison selector
3, compare the number of tag selector
Second, the pseudo-class selector
Pseudo-class selector for adding special effects to some selectors
link is not clickable links
Click on the link that has been visited
active selected time
hover mouse hover time
Third, the dummy selector elements
css3 added. Adding content literally false elements by way of style in the back of the element.
1, :: first-letter of the first word
2, :: First-Line first row (the first row to the subject browser)
3, :: selection selected word line (the mouse to select the field) can only apply a little CSS property to :: selection selector: color, background, cursor and outline.
4、 ::before 和 ::after
A content property must take;
Inserts in front of or behind the inner content;
When the content definition inserted width and height and other attributes, in fact, a box (display must be converted, because the default element within a row);
Note: input not use pseudo-elements. (Why input does not support pseudo-elements (: after,:? Before) )
Fourth, the structural pseudo class selector
Structural pseudo-class selectors select elements according to the nested structure. Css3 part belongs to the low version of the browser is not compatible
1、li:first-of-type
/ * Select the parent element inside the first element li ignore other elements * / = li: nth-of -type (1)
In the following code, p1 and p5 are selected.
<div class="content"> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> <span>span1</span> </div> <p>p5</p>
2, li: last-of-type / * select parent element inside a penultimate li element ignore other elements * /
3, p: only-of-type / * select parent element may be present only inside the other sub-elements p * /
4、li:first-child
/ * Select the parent element of the first element and the first element of claim Li * /
You can only choose to p1 above elements.
5, li: last-child / * select the first element of the parent element and the inverse of the required elements li * /
6, p: only-child / * Select the parent element, the only child element p does not allow other child elements * /
7, p: nth-of-type (2) / * Select the parent element of the second p element to ignore other elements * /
8, p: nth-last-of-type (2) / * select parent element penultimate p element to ignore other elements * /
9, p: nth-child (2) / * Select the parent element and the child element of the second claim of this element is p * /
10、p:nth-last-child(2)
11, p: not (.box) / * Select the addition .box p * /
12, E: first-line E represents the first element row
E: first-letter E denotes a first character elements