很多小伙伴们会遇到这样的情况：有一个 HTML 元素，它的样式在 CSS 中出现过一次定义，在 HTML 的 ​<style​> 又出现过一次定义，最后在行间样式中又出现过一次定义，那么这个元素最终应该应用哪个样式呢？这就是 CSS 冲突，同一个元素可能会有多个 CSS 定义，这个时候就会出现 CSS 冲突。那么这样的 CSS 冲突怎么解决呢？接下来就由小编来给大家介绍：什么是 CSS 样式优先级？它们的权重又是怎么样的？

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

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

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

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

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

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

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

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

复杂的选择器权值计算可以参考小编的这篇文章：CSS高阶知识点-CSS权值计算方法

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

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

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

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

小结

以上就是 CSS 冲突怎么解决的方法。更多前端开发知识学习，尽在前端微课。