css 权重

前言

做为一个web端工程师，不可避免的会用到css，知道css的权重原则能够帮助咱们更好更快的去理解css。

权重列表

类型	权重	eg：
html 标签	1	p(标签){}
class	10	.test{}
id	100	#test{}

组合类型

类型	权重	eg：
组合标签	1 + 1	div em{}
标签和class	10 + 1	div.test{}
标签和class	100 + 10	#test .red{}

tips: 选择符权重相同的状况下，样式会遵循就近原则，哪一个选择符最后定义，就采用哪一个选择符的样式。

结论

css 选择符的权重越高，样式就越不容易被覆盖，越容易对其余选择符产生影响，因此为了保证样式容易被覆盖，提升可维护行，css 选择符需保证权重尽量低。