摘要 今天小编跟大家讲解下有关css样式冲突怎么解决 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css样式冲突怎么解决 的

今天小编跟大家讲解下有关css样式冲突怎么解决 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css样式冲突怎么解决 的相关资料，希望小伙伴们看了有所帮助。

一个网页有时会使用两种css 那发生css样式冲突要怎么解决 下面本篇文章就来给大家介绍一下发生css样式冲突的解决方法 希望对大家有所帮助。

css冲突怎么解决

解决方法有很多 如果可以对html改动的话 就给你需要细化的页面元素加多一个class或者ID就行了 当然这种方法应该不是你想要的。那么接下来是不改变html的情况下 直接用css的方法来实现你想要的效果。

方法一：细化选择符

假如全局是这样来定义一个元素的样式的：.abc {background:#000} 同时这个class为abc的元素是隶属于某个元素的 比如下面这样的html代码结构

<div><div></div></div>

那么在细化css里面 只需要在.abc前面加多一个父元素的选择符就行了：

.container .abc {background:#fff}

这样.container.abc的优先级就大于了.abc 自然细化css里面的background设置也就不会被全局css覆盖了~~

方法二：提升样式的优先级

这种方法个人不太推荐 相对而言会简单粗暴一些。同样是上面的例子 在细化css里面 只要在样式后面加一个!important 例如这样：

.abc {background:#fff !improtant;}

这个样式的优先级就会默认提升到顶级 全局样式就无法影响到它了。

方法三：改变两个样式的加载顺序

这种方法比较简单 就是只要把细化css加载在全局css之后就行了 这样后面的样式就会自动覆盖前面的样式。不过如果你的html里面这两个样式表的加载顺序是先细化后全局的话 就要稍微调整一下代码才行。

来源：爱蒂网