html权重什么作用,css权重是什么意思？

什么是CSS的权重？对于前端工程师来说，这是一个很基础的问题，如果前端工程师没有深刻理解这个概念，则很难写出高质量的CSS代码。

讨论CSS的权重，则必须想了解而且是深刻的了解CSS样式的6种基础选择器：id选择器(#box{})

类选择器(.box{})

属性选择器(a[href="http://www.xxx.com"])

伪类和伪对象选择器(:hoevr{}和::after{})

标签类型选择器(p{})

通配符选择器(*{})

所有在CSS样式中定义的选择符都是由这6种基础选择符组合而成的，组合的方式也分为三种：后代选择符、子选择符、相邻选择符。

CSS的权重指的是这些选择符的优先级，优先级高的CSS样式会覆盖优先级低的样式，优先级越高说明权重越高，反之亦然。

按照规则，基础选择器具有这样的优先级：ID > 类 | 伪类 | 属性选择 > 标签类型 | 伪对象 > 通配符

权重决定了你css规则怎样被浏览器解析直到生效。css权重关系到你的css规则是怎样显示的

权重记忆口诀：从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

通用标签ID类，选择包含加伪类类型权重! important无穷

行间样式1000

id100

class/属性选择器/伪类:hover10

标签选择器/伪元素:after1

通配符001. *{} ====》0

02. li{} ====》1(一个元素)

03. li:first-line{} ====》2(一个元素，一个伪元素)

04. ul li {} ====》2(两个元素)

05. ul ol+li{} ====》3(三个元素)

06. h1+ *[rel=up] {} ====》11(一个属性选择器，一个元素)

07. ul ol li.red{} ====》13(一个类，三个元素)

08. li.red.level{} ====》21(两个类，一个元素)

09. style="" ====》1000(一个行内样式)

10. p {} ====》1(一个元素)

11. div p {} ====》2(两个元素)

12. .sith {} ====》10(一个类)

13. div p.sith{} ====》12(一个类，两个元素)

14. #sith{} ====》100(一个ID选择器)

15. body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)