自己对以后的方向很明确，但是却一直做不到。接连的 rejected 多少对自己有影响。不是自己不去争取，而是真的已经疲了，或者说自己也怂了。面试的时候已经不知道该怎么办，即使自己的知道的问题也只会模棱两可地回答。滚回学校慢慢学吧
如果你现在问我CSS的权重，我也只能说个大概。于是开始整理有关的资料。
CSS Specificity
有时候你会发现自己辛辛苦苦写的CSS样式不起作用，文件引入了，浏览器也加载了，但就是不按照你想要的方式显示，这个时候你就需要考虑 CSS权重的问题。如果你对权重的工作方式有所了解，将会大大减少调试bug的时间。
如果想解释权重的工作方式，最好的办法就是针对问题来分析。下面就是一个 CSS 样式没有按照期待的方式显示的例子。
一个简单的无序列表
<ul id="summer-drinks">
<li class="favorite">Whiskey and Ginger Ale</li>
<li>Wheat Beer</li>
<li>Mint Julip</li>
</ul>而在CSS中，是酱紫的：
ul#summer-drinks li {
font-weight: normal;
font-size: 12px;
color: black;
}
.favorite {
color: red;
font-weight: bold;
}但是你会发现，拥有class为favorite的li元素中的内容并没有像你期待的那样加粗变红。这就是权重引发的“血案“！别急别急，我们可以好好的捋一捋。
什么是CSS的权重
我的理解就是：CSS规则的优先顺序，权重高的优先。权利大的才有发言权。
每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。权重决定了哪一条规则会被浏览器应用在元素上，如果两个选择器作用在同一元素上，则权重高者生效。
那上面的例子来说，两个CSS选择器 ul#summer-drinks 和 .favorite 有自己的权重，而前者的权重高于后者。所以采用的样式由前者决定而非后者。
如何计算权重
规范中给出的定义在这里，分成四种不同等级的基础权重值，选择器最终的权重（优先级）由四个值共同决定。这四个等级分别是：
- 行内样式，html文档中定义的style，不包含选择器，直接对元素起作用。
- ID选择器
- 类（class），属性选择器（attribute selector）和伪类选择器（pseudo-class-selector）
- 元素和伪元素（pseudo-elements）
搞明白了这几个等级，权重的计算也是很简单了，为了方便计算和描述，分别将这四个等级标记为a, b, c, d。
- 如果样式声明来自行内样式（style），将不包含选择器，直接作用在元素上，权重的基础值记为
1, a = 1; - 计算选择器中ID选择器的个数x，b = x;
- 计算选择器中class选择器，属性选择器和伪类选择器的个数y，c = y;
- 计算元素选择器和伪元素的个数z，d = z;
就象这样：
最后的到的权重就是 0(1), x, y, z，把它看作一个4位数的数字，数字越大权重越高。可以这么记：从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.比如：
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<head>
<style type="text/css">
#x97z { color: red }
</style>
</head>
<body>
<P id="x97z" style="color: green">
</body>P标签的颜色将会是绿色，因为权重的关系，行内样式会覆盖其他定义的样式。
借鉴一下老外的图：
或者
然后
还有
要注意的是：
- 通配符选择器
*不具有特殊性，其权重为(0, 0, 0, 0) - 伪元素(0, 0, 0, 1)和伪类选择器(0, 0, 1, 0)不是同一个东西，他们的权重值也不一样
- 伪类选择器 :not()不具有特殊性，它的权重由括号内的内容决定
###特殊的 !important !important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。
例如：
#header nav ul li.current {
color: red; font-weight: bold;
}
// 权重值为 0, 1, 1, 3
li:hover {
color: blue !important;
font-weight: normal;
}
// 权重值仅为0, 0, 0, 2所以应用于相同元素时，前者生效。但是对于color这个属性，由于在后者中用 !important 做了指定，因此color将应用后者的规则。而font-weight则按照规定用前者的规则。
如果多条规则中都对同一个属性指定了 !important ，这时 !important 的作用相互抵销，依然按abcd四组计算比较。
参考自：
WCR specified-value
specifics on css specificity
WCR specificity