CSS3 selector (full)

CSS3 selector (full)
CSS selector Review

General selector: * select all elements
Select child element:> select the direct descendant of the element (level 1 child element)
Adjacent sibling selector: + selects the first element next to the target element.
Common sibling selector :~ Select All sibling elements that follow

Pseudo element Selector <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Vc3Ryb25nPqO6PGJyIC8 + examples/6bXEytfX1sS4PGJyIC8 + examples/examples + examples/templates = "here I will write an image description" src =" http://www.bkjia.com/uploads/allimg/160223/0425562632-1.png "Title =" \ "/>

Div: only-child note space (select the unique child element under the div)
Pseudo-class selector
: Link pointing to the link setting style of the page not accessed
: Visited: Set the style of the link pointing to the accessed page.
: Triggered when hover is hovering over the mouse
: Triggered when active is clicked
: Enabled select the Enable status Element
: Disabled: select a disabled element.
: Checked: select the selected input element (single choice button or check box)
: Default: select the default Element
: Valid and invalid select valid or invalid input elements based on input verification
: In-range and out-of-range: select elements within or outside the specified range.
: Repuired and optional: select the input element based on the required attribute.

If the link color is set to the same as that of visited, when the page is opened, the link style is overwritten by the visited style. As shown above, the font color displayed on tag a is green.
However, if the attribute is set to different, the overlay effect can be displayed.

When you click a, the font color is yellow.
Use label to modify the radio style:

Implementation results:

: Default

<Code class = "hljs xml"> <meta charset = "UTF-8"> <meta name = "Keywords" content = "keyword 1, keywords 2 "> <meta name =" Description "content =" website Description "> <meta name =" Author "content =" Liu Yan "> <title> </title> <style>: default {background: #009FE6 ;} </style> <form> <input type = "text" data-cke-editable = "1" contenteditable = "false"> <button> button </button> <input type = "submit" value = "submit" data-cke-editable = "1" contenteditable = "false"> </form> </code>

The Button that gets the focus by default in the form.

Attribute Selector
E [attr] attribute name, not sure about the specific attribute value
E [attr = "value"] specifies the attribute name and its corresponding Attribute value
E [attr ~ = "Value"] specifies the property name. The property name is found and is separated by spaces with other property names, as shown below:

E [attr ^ = "value"] specifies the attribute name. The attribute value starts with value.
E [attr $ = "value"] specifies the attribute name. The attribute value ends with value.
E [attr * = "value"] specifies the attribute name, which contains the value
E [attr "=" value "] specifies the attribute name. The attribute value starts with" value-"or the value is" value ".