css priority mechanism_html/css_WEB-ITnose

Priority of styles

External style sheet <Internal style sheet <Inline style

(Internal style is css written in the tag of the html page) (Inline style is css written directly in the style attribute of the html tag)

Priority of selectors

1. The weight of the inline style sheet is up to 1000;

2. The weight of the ID selector is 100

3. The weight of the Class class selector is 10

4. The weight of the HTML tag selector is 1

CSS priority rule

A Each selector has a weight, and the greater the weight, the priority;

B When the weights are equal, the style sheet setting that appears later is better than the style sheet setting that appears first;

C The creator's rules are higher than those of the browser: that is, the CSS style set by the web page writer has higher priority than the style set by the browser;

D The inherited CSS style is not as good as the CSS style specified later;

E In the same set of attribute settings, the priority of the rules marked with "!important" is the highest

F In the same css file, the content of the same selector and the same priority is written later. The content will overwrite the previous content. For example: .abc{margin:10px;}.abc{margin:20px;}, the final margin value of the content with class abc is 20px. The reason for this is the way the CSS file is run, which is interpreted and run from front to back.