css样式优先级的权重如何划分

这篇文章主要讲解了“css样式优先级的权重如何划分”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css样式优先级的权重如何划分”吧！

首先，同一个标签上可能会有多个不同的 CSS 属性，这些 CSS 属性作用在同一个标签上，就有了优先级的差异，一般情况下简单的选择器的权重大概可以按照如下的顺序（从高到低）进行比较：

最高级别的权重：！important，属于绝对优先；

第二级别的权重：行间样式（内联样式）；

第三级别的权重：id 选择器；

第四级别的权重：class 选择器，伪类选择器，属性选择器；

第五级别的权重：标签选择器，伪元素选择器；

第六级别的权重：通配符选择器（*），子选择器（>），相邻同胞选择器（+）等选择器；

最低级别的权重：浏览器默认样式；

有上述的规律也可以知道：浏览器默认样式最低，是因为通配符选择器都能比他更优先；因为通配符选择器样式权重极低，所以一般在 CSS 中用来初始化浏览器样式。

以上是权重不同的情况，那如果权重相同的情况怎么比较呢？CSS 可以理解为是顺序执行的，权重相同的情况下位于后面的代码会覆盖掉前面的代码。

根据以上规律，可以得到如何避免 CSS 冲突的办法：如果可以提升权重，就提升权重；如果不能提升权重，就把权重提到相等，然后将要渲染的样式放到较后方（不建议使用这种方法，因为有些浏览器可能不支持这种做法）。

另外，很多读者会问，不是还有最高级权重嘛？没错，可以使用最高级权重来进行样式的锁定，但这样会让代码不好定位样式错误，所以不到万不得已，千万不要使用。此外，行间样式也应该尽量少用，因为标准的 HTML 与 CSS 的分工，是 HTML 负责文本结构，CSS 负责样式处理，如果使用行间样式，就相当于让 HTML 也负责了样式，这样子对样式的调试也不好。

感谢各位的阅读，以上就是“css样式优先级的权重如何划分”的内容了，经过本文的学习后，相信大家对css样式优先级的权重如何划分这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！