CSS样式的优先级详解

2022-10-17 20:45:41 发布:网友投稿来源：网友投稿

热度:94

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

操作方法

01
同级别的样式，后面写的样式，肯定会比前面的更优先。（在样式里不添加!important属性的情况）代码如图
02
运行页面，可以看到我们第一个p的文字颜色是后面定义的红色，优先级高，把前面定义的黒色覆盖了。
03
如果把样式类名，改成用ID定义的样式呢，如图
04
可以看到，现在第一个p的文字是黑色的，虽然用ID定义的样式是先写，但ID比类具有更高的优先级，后写的类样式覆盖不了这个ID定义的样式。
05
在用类做样式定义时，层级较多的，优先级比层级少的更高，代码如图，第一个样式用了二层去定义类为A的样式，它比第二个样式（层级只有一层）有更高级别。
06
运行后，可以看到现在文字的样式是第一个样式定义的蓝色字体。
07
再介绍一种比较特殊的情况，就是样式里加了 !important属性的样式，是优先级最高的，不管是ID定义的样式，还是层级较多的类定义的样式，都比这个属性的优先级低。代码如图
08
运行页面后，可以看到，现在第一个p的文字是红色，就是加了 !important属性的样式定义的颜色，该样式优先级最高。