作者在网上找了很久，找到的关于CSS选择器的权重的内容都大同小异，其中最核心的就是下图
把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下：
1、第一等：代表内联样式，如: style=””，权值为1000。
2、第二等：代表ID选择器，如：#content，权值为100。
3、第三等：代表类，伪类和属性选择器，如.content，权值为10。
4、第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
计算方式就是，有多少加多少，最后值最大的为显示出来的css样式。
但是作者尝试了一下，发现有点问题。
div#test0 div#test1 div#test2 div#test3 div#test4 div#test5 div#test6 div#test7 div#test8 div#test9 div#test10 h1{
color: blue;
}
按照上面的权重算法，上面的应该有1112，大于内联的1000，所以，h1应当显示blue，但是，实际上使用的，还是显示内联的颜色。程序代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;padding:0;border:0;
}
div#test0 div#test1 div#test2 div#test3 div#test4 div#test5 div#test6 div#test7 div#test8 div#test9 div#test10 h1{
color: blue;
}
</style>
</head>
<body>
<div id="test0">
<div id="test1">
<div id="test2">
<div id="test3">
<div id="test4">
<div id="test5">
<div id="test6">
<div id="test7">
<div id="test8">
<div id="test9">
<div id="test10">
<h1 style="color: red;">h1</h1>
<h1>h1</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
作者观点：css选择器的原则应当是越精准，权重越大，同种等级之间相加的数值才有比较的意义，不同等级，应选择显示等级小的。