CSS优先级及权重计算

一、优先级分类
通常可以将css 的优先级由高到低分为6组：

1. 第一优先级：无条件有限的属性只需要在属性后面使用！ important。它会覆盖页面内任何位置定义的元素样式。IE6不支持该属性。
2. 第二优先级：在HTML中给元素标签加style，即内联样式。该方法会造成CSS难以管理，所以不推荐使用。
3. 第三优先级：有一个或多个id选择器来定义。例如，#id{margin： 0}会覆盖.classname{margin: 3px}
4. 第四优先级：有一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin: 3px}会覆盖div{margin: 6px}
5. 第五优先级：有一个或多个类型选择器定义。如div{margin: 6px}覆盖*{margin: 10px;}
6. 第六优先级：通配选择器，如*{margin: 6px;}
   二、选择器的权重及优先规则
   在css中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于一般选择器的规则。入股两个规则的特殊性相同，那么后定义的规则优先。
   那么如何计算选择器的特殊性呢？那就要用到选择器的权重计算了。计算规则如下图：
   权重计算
   我们把也属性分为4个等级，每一个等级代表一类选择器，每个等级的值相加得出选择器的权重。
   4个等级的定义如下：

• 第一等级：代表内联样式，如style=“”，权值为1000
• 第二等级：代表ID选择器，如#content，权值为100
• 第三等级：代表类，伪类和属性选择器，如.content，权值为10
• 第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
  注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中， 所以他们的权值为0
  如上图，真个选择器表达式的特殊值为113
  三、优先级不起作用
  如果遇到了似乎没有起作用的css规则，很可能是出现了特殊性冲突。这时可以在选择其中添加他的一个父元素的ID，从而提高它的特殊性，如果这能解决问题，就说明样式表中其他地方很可能有更特殊的规则，他覆盖了你的规则，此时需要检查代码，解决特殊性冲突，让代码尽可能的简洁。