选择器权重计算
共分为4个等级：
- 第一等：代表内联样式，如: style="xxx"，权值为1000。
- 第二等：代表ID选择器，如：#content，权值为100。
- 第三等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10。
- 第四等：代表元素选择器和伪元素选择器，如div，p，权值为1。
注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。
一些案例：
一些test
自己拿些例子，下面是一段HTML代码的CSS样式，知道最后h2标签是什么颜色吗？
#content div#main-content h2{
color:red;
}
// 100(#content) + 1(div) + 1000(#main-content) + 1(h2) = 202
#content #main-content>h2 {
color:blue
}
// 100(#content) + 1000(#main-content) + 1(h2) = 201
body #content div[id="main-content"] h2 {
color:green;
}
// 1(body) + 100(#content) + 1(div) + 10([id="main-content"]) + 1(h2) = 113
#main-content div.paragraph h2 {
color:orange;
}
// 100(#main-content) + 1(div) + 10(.paragraph) + 1(h2) = 112
#main-content [class="paragraph"] h2 {
color:yellow;
}
// 100(#main-content) + 10(class="paragraph") + 1(h2) = 111
div#main-content div.paragraph h2.first {
color:pink;
}
// 1(div) + 100(#main-content) + 1(div) + 10(.paragraph) + 1(h2) + 10(.first) = 123
这里是HTML代码：
<div id="content">
<div id="main-content">
<h2>CSS简介</h2>
<p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
<div class="paragraph">
<h2 class="first">使用CSS布局的优点</h2>
<p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
</div>
</div>
</div>
知道是什么颜色了吗？yeah,and the Red!
