CSS的样式冲突
CSS本身的语法（Style Sheet）相当简单，但前面那个“C"（层叠）却不简单，考虑这个问题：如果一个在CSS中有多个地方对同一个对象修饰，并发生冲突，哪一个起作用？这个问题几乎是所有使用CSS的网页都会遇到的，也是CSS所强调的C的原因。
《CSS Mastery》 这本书给这个问题做了准确的回答，CSS是依据Style Sheet的出身（在哪里定义的？）和权重（定义的有多详细？）这两个东西来解决冲突的。
出身分为几种：Author Style是指Web本身所包含的样式，User Style则是浏览网页的用户在本地定义的样式，Browser Style则是浏览器本身携带的一些样式，通常情况他们的优先级很明显，Autho Style > User Style > Browser Style，但这里有个复杂的情况是，User Style和Author Style都可以在定义的时候加上 ！important 这个修饰，加上这个也容易理解，就是比一般样式要重要，自然要优先考虑，但奇怪的是：在CSS规范中，加Important 的User Style是要高于加Important的Author Style的，也就是说，按出身来排的话可以得到这样的优先顺序：
- Important User Style
- Important Author Style
- Author Style
- User Style
- Browser Style
虽然上面这个出身规则排起来很清楚，但实际上经常遇到另一种靠出身解决不了的冲突，即发生在同一个出身内部的冲突，比如Author Style内部可能就有多个样式会冲突，这时需要看权重（Specificity）了，权重的本意是让修饰的最“仔细”的样式优先，所以定下了这么个顺序：
- Inline的样式（直接写在HTML文件中），权重最大
- 以ID来修饰的样式排第二，并且ID个数越多，权重越大
- 以Class来修饰的样式排第三，并且Class个数越多，权重越大
- 以HTML Tag来修饰的权重最小，Tag越多，权重越大
如果加上权重还是不能排出优先，那么最后一招：看先后，后定义的样式覆盖先定义的，到这一步，终于可以保证解决所有的样式冲突了，不过也确实够复杂的。
可以参考的两个网页（不过都不全面）：
- http://www.hwg.org/resources/faqs/cssFAQ.html#cascorder
- http://webdesign.about.com/od/css/f/blcssfaqcascade.htm
相关文章