CSS中的优先级(有些翻译为特殊性

CSS如果在网站中大量使用的话，常常就会纠结于这样的问题：当前的这个<DIV>到底使用了哪些样式呢？为什么会这样展现？哦，我烦死了一堆的ID定义的CSS，还有在HTML中直接写style。理解CSS

之前发的CSS技巧贴里面有CSS优先级的内容，不过描述过于简短了。想更好的使用CSS，或者成为高级的CSS研发人员，必须了解掌握CSS的优先级和继承。

Meyer的书中有大量的篇幅来介绍这点，我这里mark一下稍微简化版，但比之前科普贴里面要强一些的。

你为同一个元素所定义的不同的样式（例如通过CLASS定义颜色，通过ID定义坐标，还有继承），这些样式经过层层堆叠组合最终都会体现在该元素上。

同一个元素同样样式，就需要考虑优先级了。优先级相等的情况下，后定义者优先。优先级高的会覆盖优先级低的样式。首先要记住一个优先级公式(优先级由低到高)，实际作用时类似于逻辑数学中的或运算。

• 元素和伪元素: d = 1 – (0,0,0,1)
• 类，伪类，属性: c = 1 – (0,0,1,0)
• ID: b = 1 – (0,1,0,0)
• 行内关联: a = 1 – (1,0,0,0)

这样设计其实很符合人的思考逻辑，离作用元素越近，或者越精确定位这个元素的样式，优先级越高。这也是很多设计师为什么仅凭感觉就能知道那个样式会生效的基础。实际上这里要计算的（废话，电脑必须通过运算才知道结果）。

举个例子：例如下列的选择器都是给一个div定义背景颜色。

div: 1个元素，优先级(0,0,0,1)

#d_color: 1 个ID 优先级 (0,1,0,0),这种情况等同于*#d_color

div#d_color:1个ID和元素，优先级(0,1,0,1)

优胜者：div#d_color，虽然看上去和二号兄弟很像。

注意，还有一个特殊的关键字：!important。别忘了前面的感叹号！这个重要人物是凌驾于前面优先级公式之上的，不管你加起来有多大，反正他最大！当然如果，所有的人都是重要人物，那有得回到优先级公式上了。

继承，其实没有什么好说的，大部分元素都会继承父元素的属性。具体到某个元素，某个样式，找个CSS文档查一下就可以了。继承的优先级是弱于优先级公式的。

层叠The Cascade，CSS名称中C来源，通过下面几步，控制样式的最终展现：

1) 找出所有作用于要渲染元素的CSS样式。

2) 根据源头归类并区分权重。源头涉及到资源是如何申明的（作者样式，用户样式，浏览器默认样式）。权重涉及到资源的重要性（!important>作者样式>用户样式>浏览器默认样式）。这点也是为什么需要格式化CSS的原因，浏览器的默认逻辑和用户样式是难以保证统一性的。

3) 计算优先级。

4) 优先级相等，后者胜出。html元素中的内联样式，总优胜于CSS定义。