CSS basic Syntax (ii) 9 selectors for CSS

Selector for style sheets

1. Class Selector

Select the properties applied to a style based on the class attribute of the HTML tag

. class Value {...}

2.ID Selector

Select the element that the style applies to based on the id attribute of the HTML tag

#id值 {...}

3. Tag Selector

Select Properties to apply based on HTML tags

Tag name {...}

4. Sub-selector

. food>li{

border:1px solid red;

}

5. Include selectors

. First span{color:red;}

6. Universal Selector

* {color:red;}

7. Pseudo-Class selectors

1. Static pseudo-Class (only for hyperlinks)

[Note]visited pseudo-class can only set font color, border color, outline color style

a:link{color:red;} sets the style of the hyperlink before it is accessed.　　A:visited{color:green;} set a hyperlink in a style that has been accessed by its linked address

2. Dynamic pseudo-Class (can be applied to any element)

Sets the style of the hyperlink when it hovers over it.
a:hover{
Cursor:pointer;
color:red;
}

Sets the style of the hyperlink when it is activated by the user (an event that occurs between mouse clicks and releases).
a:active{
Cursor:pointer
color:red;
}

Have focus
input:focus{

}

3.UI element Pseudo-class

[Note that there can be no spaces between]input and enabled

Available status

input:disabled{color:red} not available status 

input:checked{color:red}  checked state

4. Structure pseudo-Class

[Note that]n can be integers (starting from 1), or it can be a formula, or it can be a keyword (even, odd)

the first child element of the parent element, equivalent to Nth-child (1) . Parent:last-child the  last child element of the parent element, equivalent to Nth-last-child (1) Select the nth child element of the parent element

5. Combination of pseudo-classes

[note] not related to order

A:hover:first-child{color:black;}

8. Pseudo Element Selector

1,: First-letter set the first letter style, can only be associated with block-level elements;

P:first-letter {color:red;}    

2,: First-line set the first line style, can only be associated with block-level elements;

p:first-line{color:red;}    

3: Before insert content in front of element content

By default, this pseudo-element is an inline element that inherits an inherited element, and all elements must be placed on the last side of the selector where the pseudo-element appears. It would be illegal to write P:before em.

P:before{content: "Text"}

4: After the content is inserted after the element content

By default, this pseudo-element is an inline element that inherits the attributes of an element

P:after{content: "Text"}

9. Property Selector

The property selector selects elements based on their attributes and attribute values

1. Simple attribute Selector

a[href][title]{color:red;} #div [Class]{color:red;}. box[id]{color:red;}
img[alt]{color:red;}
[Class] {color:red;}

2. Specific attribute Selector

a[href= "http://www.baidu.com"][title= "Baidu"] {color:red;}  

3. Partial attribute Selector

[Class ^= "B"] Select all elements with class attribute value starting with "B" [Class $= "B"] Select all elements with class attribute value ending with "B" [Class *= "B"] Select all elements of class attribute value containing "B"  
The above three belong to the regular match, is CSS3 new attribute selector

CSS basic Syntax (ii) 9 selectors for CSS