css属性继承和优先级算法

css属性继承和优先级算法

一、css属性继承
可继承的:

font-size、font-family、color

不可继承的:

border、padding、margin、background-color、width、height

二、css优先级算法
CSS选择器优先级(特异性)

是指在给HTML元素运用样式时,如果有多个CSS选择器同时指向了这个元素,那么优先级高的选择器的样式将最终运用到这个元素上。

CSS选择器权重计算

css属性继承和优先级算法
在计算权重的时候可以用一组向量标志来表示(0,0,0,0)
(计算的时候就相当于第一位*1000+第二位*100+第三位*10+第四位*1
第一位:行内样式(在有行内样式的时候变成"1"

第二位:ID选择器数量

第三位:Class、属性、伪类选择器的数量

第四位:类型和伪元素选择器数量

如果最后计算权重相同,那么以定义顺序靠后的选择器优先,或者有**!important**标记优先
css属性继承和优先级算法

举个栗子:

我们想要修改“项目2”字体的颜色,此时显示粉色
css属性继承和优先级算法
还可以添加不同权重的选择器,来提高优先级,所以最终显示蓝色

css属性继承和优先级算法
在刚才的基础上再加上一个ID选择器,此时权重变成(0,1,1,1),此时显示黄色
css属性继承和优先级算法
如果我们再加上一个伪类选择器的话权重变成(0,1,2,1)高于下面的(0,1,1,1),所以此时最终显示的是绿色
css属性继承和优先级算法
如果权重相同的话,那么是以代码中定义的顺序靠后的选择器优先执行,所以此时显示的还是绿色
css属性继承和优先级算法
这里有个小技巧,写两遍选择器,来提高权重,此时(0,1,3,1)高于(0,1,2,1),所以显示红色
css属性继承和优先级算法