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