权重计算

权重计算

比较代码存放位置

从css代码存放的位置来看，权重计算是

内嵌样式 > 内部样式表 > 外联样式表

比较重要性

!important样式 > 普通样式 > 浏览器默认样式表中的样式

比较特殊性

参考w3c样式选择器权重优先级如下

important > 内联样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数（x x x x）

1. 千位：如果是内联样式，记1，否则记0
2. 百位：等于选择器中所有id选择器的数量
3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量

比较书写顺序

在同等权重的情况下，代码书写靠后的胜出

CSS基础属性

字体属性(font)

1. font-family 设置使用的字体

2. font-style 设置字体的样式，是否斜体

3. font-variant 设置字体的大小写

4. font-weight 设置字体的粗细

5. font-size 设置字体的大小

6. letter-spacing 设置字间距

7. word-spacing 设置单词间距

文本属性(text)

1. text-align 设置文本的水平对齐方式

2. text-indent 设置文本的首行缩进

3. line-height 设置文本的行高

4. text-decoration 设置文本修饰

5. vertical-align 设置文本的垂直对齐方式

背景样式(background)

1. background-color 背景颜色

2. background-image 背景图片

3. background-repeat 背景重复

4. background-attachment 背景固定

5. background-position 背景定位