CSS selectors finishing

The basic selector

• The tag selector: write directly to the tab name
• id selector:#id名
• class selector:.class名
• Wild selector:*

Combination selector

• Intersection:ABCDEFG......
• Union:E, F, G, ......

Relations selector

• Offspring:E F
• Progeny:E > F
• Neighbor:E + F
• brothers:E ~ F

Attribute selectors

• E[attr]: This property has attr
• E[attr = "val"]: Val attribute equal
• E[attr ~= "val"]: Property values ​​separated by spaces, comprising val
• E[attr ^= "val"]: Property values ​​beginning with val
• E[attr $= "val"]: Val attribute value to the end
• E[attr *= "val"]: Attribute value contains val
• E[attr |= "val"]: Attribute values ​​- the partition, and comprising val, can be considered only val

Pseudo class selector

• E:link: Links not visited before style
• E:visited: Its link address in a link has been visited outdated style
• E:hover: Elements of style when it hovered over
• E:active: Style element when activated (events occurring between the mouse click and release) users
• E:focus: Object Styles when it has input focus (onfocus event of the occurrence of the object) of
• E:lang(fr): E match using a special language elements
• E:not(s): S do not contain the matching selector element E
• E:root: E match of the root element in the document. In HTML, the root element is always the HTML
• E:first-child: Matching the first child of the parent element E
• E:last-child: Matching parent element the last child element E
• E:only-child: The only match parent element of a child element E
• E:nth-child(n): Parent element matching n th element E, it is assumed that the child is not E, select is invalid (2n + 1 may be representative of 2n or parity, can also be used on behalf of the odd and even parity)
• E:nth-last-child(n): Parent element matching the reciprocal of the n-th element E, it is assumed that the child is not E, select is invalid
• E:first-of-type: Match the same type in the first sibling sibling E
• E:last-of-type: Match the last sibling sibling of the same type of E
• E:only-of-type: The only match a sibling sibling of the same type E
• E:nth-of-type(n): Match the same type in the n-th sibling siblings E
• E:nth-last-of-type(n): Match the same type of reciprocal n-th sibling siblings E
• E:empty: No match any sub-elements (including text node) of the element E
• E:checked: The element is selected to match the user interface E. (For input type for the radio and checkbox time)
• E:enabled: Match on the user interface in a usable state of the element E
• E:disabled: Match on the user interface in a disabled state of the element E
• E:target: URL points to match the relevant elements of E

Pseudo-element selector

• E:first-letter/E::first-letter: The first character of the provided object style (This pseudo object acts only on the block object inline objects to use this pseudo object, it must be set as a block-level object), the object selectors pseudo CSS3 (Pseudo- single colon preceding Element selectors) (:) modified double colon (: :) class selector used to distinguish between the dummy (pseudo-classes selectors), but is still valid before writing. I.e. E: first-letter can be converted to E :: first-letter
• E:first-line/E::first-line: The first line in the set object styles
• E:before/E::before: Content setting occurred before the object (the object based on the logical tree structure). For use with the content property, and the content attribute must be defined
• E:after/E::after: Content setting occurs after the object (the object based on the logical tree structure). For use with the content property, and the content attribute must be defined
• E::placeholder: Sets the style of the target character placeholder (:: placeholder pseudo-element form inputs for controlling the appearance of a placeholder that allows a developer / designer-style change text placeholder, the default text placeholder as a pale gray. when the form is similar to the background color of the color of its possible effects is not very obvious, then you can use this pseudo-elements to change the color of the text placeholders. Note that, in addition to Firefox is :: [prefix] placeholder, other browsers are using :: [prefix] input-placeholder Firefox support this pseudo-element using the text-overflow property to handle the overflow.)
• E::selection: When setting the style object is selected