怎么解决两个CSS定义冲突？

Question

我的网站有两个CSS，一个作为全局的，一个作为具体某一个网页的细化CSS。我同时在某html里引用了这两个CSS，如何使得全局css的优先级最低？这样我的细化css里的background设置就可以不被全局css覆盖了

Answer 1

解决方法有很多，如果可以对html改动的话，就给你需要细化的页面元素加多一个class或者ID就行了，当然这种方法应该不是你想要的。那么接下来是不改变HTML的情况下，直接用css的方法来实现你想要的效果——
方法一 细化选择符
假如全局是这样来定义一个元素的样式的：.abc {background:#000}，同时这个class为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 !improtant;}
这个样式的优先级就会默认提升到顶级，全局样式就无法影响到它了。

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

Answer 2

全局用class，需要细化的部分加个id。

例如：

1	<div class="one_all" id="one_self"></div>

全局css部分就可以这样写

1	.one_all{ width:200px; height:200px; background:#996633;}

细化CSS部分就这样写：

1	#one_self{ background:#FF0000;}

这样就达到了你的细化要求了。

div的宽度和高度都是200像素，但是背景色不再是全局的背景色了，而是特别设置的红色了。