1, attribute selector
Attribute selector, the element may be selected according to specific attributes of elements, so do not class or id selector means.
E [att] E is selected, for example, an element having att attributes: input [value]
E [att = 'val'] att attribute and the attribute selected to have a value equal to the element E of val
E [att = 'val'] att attribute and the attribute selected to have a value equal to the element E of val
E [att ^ = 'val'] val selected beginning element of E and attribute property value with the att
E [att $ = 'val'] having a selected attribute and the attribute values att end element of val E
E [att * = 'val'] having a selected attribute and an attribute value att containing element of val E
Note: class selectors, attribute selectors, pseudo class selector 10 are weights
2, the structure of the pseudo-class selector (which typically is used to select the parent of several children)
Parent elements E: first-child of the first child element of the parent element E
Parent element E: last-child parent element the last child element E
Parent elements E: nth-child (n) of the parent element in the sub-elements E N
note:
ul: first-child {color: pink;} // selecting a first child element under UL (first child element allows div, p, span child elements)
ul li: first-child {color: pink;} // the name of the selected first element is a child element of the li ul
nth-child (n) Note points: (n may be a number, key and formulas)
Digital: selecting the n th element, which number begins from the 1
Keywords: even the even, odd odd
ul li: nth-child (even) // li children ul select all the even rows
Formula: common formulas as follows (if n is a formula, calculation starts from 0, the 0-th element or exceeds the number of elements will be ignored)
ul li: nth-child (n) // 0 from the beginning of each plus 1 back, equivalent to select all of the children there have to be other letters can not be n
The even: 2n odd: 2n + multiples of 15: 5n starts from the 5th (including the first five) to the end: n + 5 Top 5 (including the first five): - n + 5
E: first-of-type: a first specified type of E
Finally, a specified type of E: E: last-of-type
E: nth-of-type (n): Specifies the type of the n-th E
:( Find the difference between two opposing models)
1. nth-child choose to sort all the children inside the parent element (the serial number is fixed) to find the n-th child, and then see if the E match
2. nth-of-type element of parent elements are designated inside sort selection. Go to match the E, and then find the n-th child according to E
3. pseudo-element selectors (focus)
Pseudo-element selectors can help us create a new label use css elements, without the need for HTML tags, which simplifies HTML structure
:: before content is inserted in front of the interior of the element
:: after content after the interior of the insert element
note:
before and after creating an element, but belong to inline elements
This newly created element in the document tree can not be found, so we called pseudo-elements
Syntax: element :: before {}
before and after must have a content property
before creating elements in front of the parent element content, after the element is inserted after the parent element content
As pseudo-element selector and a tag selector, a weight of 1