css权重及作用

一、什么是样式权重？

假设存在一个div元素，我们给它设置css的方式有很多，例如：！important、行内样式、id选择器、class选择器、元素/标签选择器。不同的样式设置方式将赋予元素不同的优先级，也对应着样式权重不同。

二、样式权重可以解决什么问题？

css权重关系到你的css规则是怎样显示的。当权重不同时，权重高的显示；当权重相同时，后写的样式起作用（后写的样式编译时将覆盖先写的样式）。

三、样式权重

行内（又称内联）样式（直接写在元素上的）>id选择器>class选择器>元素选择器

1. 建议一个页面只有一个id，其余的用class（只是建议，非强制）
2. 权重计算：权重采取累加的形式。当累加值不同时，累加值高的生效；当累加值相同时，后写的生效。
3. 权重值：
   (1).行内（又称内联）样式，权值为1000（会造成css管理困难，不建议使用）；
   (2)id选择器，权值为0100；
   (3)class选择器，权值为0010；
   (4)标签选择器，权值为0001；
   将这些值累加起来就是当前元素的权重。
4. 若在属性后使用！important，该属性将无条件优先，会覆盖页面内任何其他位置的定义；
5. 通配符（主要有星号(*)和问号(?)，用来模糊搜索文件）、子选择器（>）等，权值为0000；
6. 继承的元素没有权值