权重计算
比较代码存放位置
从css代码存放的位置来看,权重计算是
内嵌样式 > 内部样式表 > 外联样式表
比较重要性
!important样式 > 普通样式 > 浏览器默认样式表中的样式
比较特殊性
参考w3c样式选择器权重优先级如下
important > 内联样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个4位数(x x x x)
- 千位:如果是内联样式,记1,否则记0
- 百位:等于选择器中所有id选择器的数量
- 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位:等于选择器中所有元素选择器、伪元素选择器的数量
比较书写顺序
在同等权重的情况下,代码书写靠后的胜出
CSS基础属性
字体属性(font)
-
font-family 设置使用的字体
-
font-style 设置字体的样式,是否斜体
-
font-variant 设置字体的大小写
-
font-weight 设置字体的粗细
-
font-size 设置字体的大小
-
letter-spacing 设置字间距
-
word-spacing 设置单词间距
文本属性(text)
-
text-align 设置文本的水平对齐方式
-
text-indent 设置文本的首行缩进
-
line-height 设置文本的行高
-
text-decoration 设置文本修饰
-
vertical-align 设置文本的垂直对齐方式
背景样式(background)
-
background-color 背景颜色
-
background-image 背景图片
-
background-repeat 背景重复
-
background-attachment 背景固定
-
background-position 背景定位