CSS various selectors

One, selector 1, element selector

li{} most commonly used, most basic

2. Derivation Selector

li strong{} tags are separated by spaces, defining the style of the strong label in the Li Tag, css1 in the context selector, css2 in the derived selector

3. ID Selector

#id {} In modern layouts, ID selectors are often used to establish derived selectors. #id div{}

4. Class Selector

. classname{} can be combined with element selectors

Multi-Class selectors

class= "classname1 classname2 classname3 ..." Space to separate versions prior to IE7, Internet Explorer on different platforms does not handle multi-class selectors correctly

5. Descendant Selector

<ul>

<li></li>

<li><em></em></li>

<li></li>

<li></li>

</ul>

UL em{} Regardless of how deep the EM element is nested, you can choose to

6. Child element Selector

If you do not want to select any descendant elements, h1>strong{} selects all child elements in the H1 strong

7. Adjacent Brother Selector

Select the element immediately after another element, and both have the same parent element H1 + P

8. Pseudo-Class

a:link {color: #FF0000}/* Link not visited */

a:visited {color: #00FF00}/* Visited link */

a:hover {color: #FF00FF}/* When a mouse hovers over the link */

A:active{color: #0000FF}/* selected Link */

This property is not supported by the Input:focus{}//ie browser. If DOCTYPE is declared, IE8 and above can support

In order to produce the desired effect, in the CSS definition, a:hover must be located after A:link and a:visited!!

In order to produce the desired effect, in the CSS definition, a:active must be located after A:hover!!

All major browsers support: Active Pseudo class. Meaning of the activation

9. Pseudo-Elements

Http://www.w3school.com.cn/css/css_pseudo_elements.asp

CSS various selectors