- 方法一 细化选择符
假如全局是这样来定义一个元素的样式的:.abc {background:#000}
,同时某个元素的子元素也应用了一个.abc
的样式,比如下面这样的html代码结构
<div class="container">
<div class="abc"></div>
</div>
那么在细化css里面,只需要在.abc
前面加多一个父元素的选择符就行了:
.container .abc {background:#fff}
这样.container .abc
的优先级就大于了.abc
,这个css里面的background设置也就不会被全局CSS覆盖了
- 方法二 提升样式的优先级
不太推荐,相对而言会简单粗暴一些。同样是上面的例子,在细化CSS里面,只要在样式后面加一个!important
,例如这样:
.abc {background:#fff !important;}
这个样式的优先级就会默认提升到顶级,全局样式就无法影响到它了。
- 方法三 改变两个样式的加载顺序
这种方法比较简单,就是只要把细化css加载在全局css之后就行了,这样后面的样式就会自动覆盖前面的样式。不过如果你的html里面这两个样式表的加载顺序是先细化后全局的话,就要稍微调整一下代码才行。
- 方法一 细化选择符
假如全局是这样来定义一个元素的样式的:.abc {background:#000}
,同时某个元素的子元素也应用了一个.abc
的样式,比如下面这样的html代码结构
<div class="container">
<div class="abc"></div>
</div>
那么在细化css里面,只需要在.abc
前面加多一个父元素的选择符就行了:
.container .abc {background:#fff}
这样.container .abc
的优先级就大于了.abc
,这个css里面的background设置也就不会被全局CSS覆盖了
- 方法二 提升样式的优先级
不太推荐,相对而言会简单粗暴一些。同样是上面的例子,在细化CSS里面,只要在样式后面加一个!important
,例如这样:
.abc {background:#fff !important;}
这个样式的优先级就会默认提升到顶级,全局样式就无法影响到它了。
- 方法三 改变两个样式的加载顺序
这种方法比较简单,就是只要把细化css加载在全局css之后就行了,这样后面的样式就会自动覆盖前面的样式。不过如果你的html里面这两个样式表的加载顺序是先细化后全局的话,就要稍微调整一下代码才行。