CSS 选择器权重值
CSS 具有自己的优先级计算方法，而不仅仅是行间>内部>外部、ID>class>元素
1. 样式类型
行间样式
<h1 xss=removed>我的行间CSS样式。</h1>
内联样式
<style type="text/css">
h1{font-size:12px;
color:#000;
}
</style>
外部样式
<link rel="stylesheet" href="css/style.css">
2. 选择器类型
选择器
栗子
ID
#id
class
.c
在CSS中，选择器的权重值是决定样式应用顺序的关键因素，它决定了哪种样式会被优先应用到HTML元素上。理解并掌握权重值的计算规则对于编写高效且无冲突的CSS至关重要。
我们要明确CSS样式的三种类型及其对应的权重：
1. 行间样式：直接在HTML元素中通过`style`属性定义的样式，如`<h1 style="font-size:12px;color:#000;">`，其权重为1000。
2. 内联样式：在`<style>`标签中定义的样式，如`<style type="text/css">h1{font-size:12px;color:#000;}</style>`，其权重取决于选择器。
3. 外部样式：通过`<link>`标签链接到外部CSS文件中的样式，其权重同样取决于选择器。
接下来，我们来看选择器的权重计算规则：
1. ID选择器，如`#content`，权值为0100。
2. 类选择器、伪类和属性选择器，如`.content`，权值为0010。
3. 类型选择器、伪元素选择器，如`div p`，权值为0001。
4. 通配符选择器`*`，子选择器`>`，相邻兄弟选择器`+`等，权值为0000。
权重计算遵循从左到右的逐级比较原则，即先比较每个等级的数值，如果前一级相同，则比较下一级。例如，1,0,0,0大于0,99,99,99。值得注意的是，继承的样式不具有权重，因此在有具体权重的选择器出现时，它们会被覆盖。
在权重相同的情况下，后定义的样式会覆盖前面的。这也是为什么有时候会误以为行间样式优于内部样式，内部样式优于外部样式，以及ID选择器优于class选择器，因为这些通常是按照代码顺序出现的。
`!important`规则可以提升样式优先级，使得带有`!important`标记的样式总是覆盖其他没有`!important`的样式，即使它们的权重更高。例如：
```css
p{color:red !important;}
```
这段代码会使得所有的段落文本显示为红色，即使在同一个元素上直接定义了不同的颜色：
```html
<p style="color:blue;">我显示红色</p>
```
在IE7及更高版本和其他现代浏览器中，`!important`的处理是正常的，但在IE6中有一些已知的bug。正确使用`!important`是非常重要的，应避免在全局CSS中使用它，只在需要覆盖特定页面或外部库样式时谨慎使用。同时，尽量避免在插件中使用`!important`，以免影响其他开发者的工作。
优化CSS样式时，应尽量利用选择器的权重规则解决问题，而不是过度依赖`!important`，这样可以保持CSS代码的可维护性和可读性。在遇到冲突时，先检查是否有更具体的、权重更高的选择器可以使用，或者调整已有选择器的结构以达到预期效果。
