What is new stuff CSS3 have it?
A, CSS3 attribute selector
E [attr] ----- Button [ "Disabled"] E elements with selected attributes attr
E [attr = "XX"] ----- INPUT [type = "text"] and is selected to have attr attribute property value is equal to E element XX
E [^ attr = "XX"] ----- INPUT [^ type = "text"] and select attributes attr property value with the beginning of the XX element E
E [attr $ = "XX"] ----- INPUT [$ type = "text"] having a selected attribute value and attribute attr ending XX E element
E [* attr = "XX"] ------ INPUT [* type = "text"] having a selected attribute and an attribute value attr comprising XX of the element E
Two, CSS3 pseudo class selector structure
ul li: first-child {} select the first label li at ul
ul li: last-child {} select the last label in the ul li
li UL: Nth-Child ( n) {} selected n th label li in the UL (n starts from 0)
- When n may be a number may be keywords - the even, ODD (interlaced color table)
- When n is even equivalent to 2n, 2n + 1 when n is odd when the equivalent
- When n li element in the selected multiple of 5 when 5n
- After the selection of the n + 3 n of all three elements li
- -N + 3 is selected when the first three elements li n is
div span: first-of-type {} selects the first element of span type
div span: first-of-type {} select the last element of span type
div span: nth-of-type (n) {} selected span type n-th element
tip: a weight of 10
Three, CSS3 pseudo-element selector
:: before an insert in the inside the front element
:: after insertion element after the interior element
tip:
- before and after must have a content property
- In front of the contents before, after the contents of the back
- before and after creating an element, but the elements belonging to row (no size) ----> {the display: Block '} or {the display: inline-Block' line block within}
- before and after the invisible elements inside just created, so we called pseudo-elements
- Pseudo-elements and the same tag selector, a weight of 1
Blog only to record what they learn, thanks to an error message if treatise Oh!