Read "Mastering CSS"-Chapter II Basics

I. Common selectors: Type selector and descendant selector, ID selector and class selector, pseudo class selector (: Link,:visited,:hover,:active,:focus)

Two. Universal selector: * (wildcard character, can also be used to apply a style to all descendants of an element)

Three. Advanced selector: CSS has backward compatibility, that is, if the browser does not understand a selector, it ignores the entire rule. You should avoid using these advanced selectors on any element that is important for site functionality or layout.

1. Sub-selector and neighboring sibling selector:> + (IE6 not supported)

2. Property selector: Depending on whether the attribute exists or the value of the property (IE6 not supported)

You can view w3c:http://www.w3school.com.cn/css/css_selector_attribute.asp

3. Stacking and particularity:

1) stacking Order of importance: (CSS style sheet)

User styles marked with!important
Author styles marked with!important
Author style
User Style
Styles for browser/user agent Apps

2) Particularity: The particularity of the selector is divided into four grades A, B, C, D

If it is in line style, a=1;

b equals the total number of ID selectors;

C equals the number of classes, pseudo-classes, attribute selectors;

D equals the number of type selectors and pseudo-element selectors.

In short: Try to keep the general style very general, special style as special as possible, so that there is no need to overwrite the special style. If you find that you have to overwrite the general style multiple times, remove the declaration you want to overwrite from the more general rule and apply it to each element that needs it.

4. Inheritance: Do not confuse inheritance and stacking!

Descendants of an element that applies a style inherit certain properties of the style, such as color and size. any style that is applied directly to an element always overrides the inherited style.

Inheritance makes it unnecessary for developers to add the same style to each descendant of an element. If the property you intend to set is an inherited property, you can also apply it to the parent element.

Four. Plan, organize, and maintain style sheets:

1. Apply a style to a document: Importing a style sheet is slower than a linked style sheet

1) Design Code structure:

A. General style:

Body style

Reset Style

Link

Title

Other elements

B. Auxiliary style:

Form

Notifications and Errors

A consistent entry

C. Page structure:

Title, footer, navigation

Layout

Other page structure elements

D. Page components

Individual pages

E. Coverage

2) Annotation Style:

3) Self-prompting:

A. @todo indicate that certain things need to be modified, repaired and reviewed in the future;

B. @bugfix indicates a problem with the code or a specific browser;

C. @workaround express the imperfect expedient.

4) Delete comments and refine style sheets

Read "Mastering CSS"-Chapter II Basics