The use of CSS selectors is detailed

-CSS Selector Categories:

Second, the common selector detailed:

1. Tag Selector:

Grammar:

Label name {

Attribute: property value;

}

code example:

H1 {

Color: #ccc;

font-size:28px;

}

2. Class selector:

Grammar:

. class Name {

Attribute: property value;

}

code example:

. Top {

margin-top:25px;

}

<div class= "Top" ></div>

3. ID selector:

Grammar:

#ID名称 {

Attribute: property value;

}

code example:

#top {

padding-top:10px;

}

<div id= "Top" ></div>

　　Note: The id attribute is unique.

4. Pseudo-Class

Grammar:

Element: Pseudo-Class {

Attribute: property value;

}

code example:

a:link {

Color:blue;

}

5. Set selector:

Grammar:

Tag name,. Class name, #ID名称 {

Attribute: property value;

}

code example:

P,.top, #title {

color:red;

}

6. Descendant selector:

Grammar:

P SPAN {

Attribute: property value;

}

Third, the general selector detailed:

Grammar:

*{

Attribute: property value;

}

Four, advanced selector detailed:

1, sub-selector:

　　　　code example:

#nav >li {

padding-left:20px;

}

2. Neighboring sibling selector:

　　　　code example:

　　　　h2+p {

Font-size:1.4em;

}

3. Attribute selector:

　　　　code example:

[id= "Header"] {

Background:url (branding-color.png) repeat-y left top;

}

A[rel= "nofollow"] {

padding-right:20px;

}

Five, the priority of the style (weight):

between basic selectors: ID Selector class Selector tag Selector

style sheet: inline style inner style) external style

CSS styles: same selector with two identical declarations, and the latter declaration overrides the previous one

The use of CSS selectors is detailed