CSS样式的优先级详解 _小知识

在做网页开发，基本上都会处理CSS样式的， css样式的优先级大家都弄清楚了吗？如果不清楚，自己写的样式为什么被覆盖了都不知道的。下面一起来了解下。操作方法 01 同级别的样式，后面写的样式，肯定会比前面的更优先。（在样式里不添加!important属性的情况）
代码如图

文章插图

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

文章插图

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

文章插图

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

文章插图

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

文章插图

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

文章插图

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

文章插图

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

文章插图

以上内容就是CSS样式的优先级详解的内容啦，希望对你有所帮助哦！

CSS样式的优先级详解