CSS样式的优先级详解

在做网页开发,基本上都会处理CSS样式的,css样式的优先级大家都弄清楚了吗?如果不清楚,自己写的样式为什么被覆盖了都不知道的。下面一起来了解下。

操作方法

(01)同级别的样式,后面写的样式,肯定会比前面的更优先。(在样式里不添加!important属性的情况)代码如图

CSS样式的优先级详解

(02)运行页面,可以看到我们第一个p的文字颜色是后面定义的红色,优先级高,把前面定义的黒色覆盖了。

CSS样式的优先级详解 第2张

(03)如果把样式类名,改成用ID定义的样式呢,如图

CSS样式的优先级详解 第3张

(04)可以看到,现在第一个p的文字是黑色的,虽然用ID定义的样式是先写,但ID比类具有更高的优先级,后写的类样式覆盖不了这个ID定义的样式。

CSS样式的优先级详解 第4张

(05)在用类做样式定义时,层级较多的,优先级比层级少的更高,代码如图,第一个样式用了二层去定义类为A的样式,它比第二个样式(层级只有一层)有更高级别。

CSS样式的优先级详解 第5张

(06)运行后,可以看到现在文字的样式是第一个样式定义的蓝色字体。

CSS样式的优先级详解 第6张

(07)再介绍一种比较特殊的情况,就是样式里加了 !important属性的样式,是优先级最高的,不管是ID定义的样式,还是层级较多的类定义的样式,都比这个属性的优先级低。代码如图

CSS样式的优先级详解 第7张

(08)运行页面后,可以看到,现在第一个p的文字是红色,就是加了 !important属性的样式定义的颜色,该样式优先级最高。

CSS样式的优先级详解 第8张