1. 权重规则：HTML标签权重是1，class的权重是10，id的权重是100
2. 例：P的权重是1，"strong.demo"的权重是10+1=11，"#test.red"的权重是100+10=110
3. 当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式
4. 如果css选择符权重相同，那么样式会遵循"就近原则"，哪个选择符最后定义，就采用哪个选择符的样式
5. "就近原则"值的是选择符定义的先后顺序，而不是挂class名的先后顺序
<!doctype html> <html> <head> <meta charset="utf-8"> <title>权重测试</title> <style> span{font-size:16px; color:green} .red{color:red} #blue{color:blue} .yellow{color:yellow} </style> </head> <body> <span>是什么颜色呢？</span> <span class="red">是什么颜色呢？</span> <span id="blue" class="red">是什么颜色呢？</span> <span class="red yellow">是什么颜色呢？</span> </body> </html>
为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低
使用子选择器，会增加CSS选择符的权重。除非确定HTML结构非常稳定，一定不会再修改了，否则尽量不要使用子选择器
少用子选择器，多添加class
