CSS selector priority and efficiency optimization_html/css_WEB-ITnose

CSS selector priority and efficiency optimization

Date: 7th of Aug, 2015

Author: HaoyCn

This article collects information about CSS selection from all over the Internet Summarize the article on the device and summarize one by yourself.

Priority of various selectors

important statement 1,0,0,0

ID selector 0,1,0,0

Class selector 0,0,1,0

Pseudo class selector 0,0,1,0

Attribute selector 0,0,1,0

Tag Selector 0,0,0,1

Pseudo element selector 0,0,0,1

Wildcard selector 0,0,0,0

above Among the selectors, in addition, tested

attribute selector = pseudo-class selector (apply the last one)

:last-child{color:red;}[desc]{color:green;}

pseudo-class selector> adjacent selector

:last-child{color:green;}p ~ p{color:blue;}

Adjacent selector = child selector = descendant selector (last one applied)

p~p{color:red;}body p{color:blue;}body > p{color:green;}

descendant selector> tag selector

p ~ p{color:blue;}p{color:green;}

style The influence of position

is the same as , and the application depends on the order of the