css中的优先级问题及其使用技巧讨论

在css样式中，有一个很重要的知识点：优先级问题。

之前在这篇文章中：（http://www.qyqy9.com/a1/25.html），我们讨论了id选择器、类选择器、标签选择器的优先级：id选择器的优先级最大，类选择器的优先级次之，标签选择器的优先级最小。

在这篇文章中，我们再来看一个最普遍的情况，代码示例如下：

-----------------------------------------------------------------------------------

<div id="div1"></div>

<style>

#div1 {width:100px;height:100px;background:red;}

#div1 {background:yellow;}

</style>

-----------------------------------------------------------------------------------

在以上代码中，最终div显示的背景颜色为：黄色。原因是因为：后面的这一行css代码：#div1 {background:yellow;}覆盖了前面的代码，前面一行代码中，设置#div1的背景色为红色，但是后面一行代码中，把#div1的背景色设置为了黄色，后面的代码覆盖了前面的代码，所以最终的#div1的背景色的显示效果为黄色。

“后面的css样式代码会覆盖前面的css样式代码”，这个原则是很重要的。在实际开发中，很多时候，我们写的css代码已经很多了，有时会超过几千行，如果我们要改页面上某一处的样式，去那一堆css代码中去找之前写的样式的话，会很累、很麻烦、事倍功半。但如果我们利用：“后面的css样式代码会覆盖前面的css样式代码”这一原则，把新的样式写在原先css代码的后面，让新的代码覆盖之前老的代码，那么就会事半功倍，做起来就非常轻松，非常愉快，也非常简单了。在轻松愉快中完成了对样式的修改，而不用苦苦地去找寻并修改之前的css代码。

在实际开发中，最常用的css优先级的技巧就是将新的css代码写在后面，从而覆盖前面的css代码。我们要学会利用这一技巧，达到在开发时事半功倍的成效。

本文为转载，原文地址：http://www.qyqy9.com/a1/27.html