说到CSS权重优先级，我想大部分人首先想到的是!important，

但具体是怎么去计算这个权重，大部分人是不太了解的。

1.位置造成的权重

在学CSS时，老师或者是书本都会告诉我们CSS样式应用时都是按照“就近原则”的。所以根据这个规则我们就知道：

内嵌样式 > 内部样式表 > 外联样式表

但实习开发过程中我们几乎都是使用外联样式表，所以以上规则我们知道就行，能用就行，在下面不做探讨。（曾经我遇到过这样一个事，用开发者工具看样式，以为内嵌样式以为是JS应用的，找半天没找到那串JS代码，）

2.选择器造成的权重

选择器造成的权重大致可以看成是与所应用元素的“亲疏关系”来决定：

important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

我们虽然知道了大小关系，但有的时候一个样式可能跟了多个选择器，那应该怎么判断它的权重大小呢？

这就是我们下面要探讨的问题，如果把CSS各个选择器的权限量化的话，按照标准是这个样子：

• important的权重为1000 (内嵌样式的权重也为1000)
• ID的权重为100
• Class的权重为10
• 伪类的权重为10 （如：E:hover{…}）
• 属性的权重为10
• 伪对象的权重为1 （如：E::before{…}）
• 标签的权重为1 （如：a{…}）
• 通配符的权重为1 （如：*{…}）

这里需要注意的是，子选择器（>）和相邻同胞选择器（+）权重都为0；

我们来看一波实例：

CSS:

content div#main-content h2{ color:red; } #content #main-content>h2{ color:blue } body #content div[id="main-content"] h2{ color:green; } #main-content div.paragraph h2{ color:orange; } #main-content [class="paragraph"] h2{ color:yellow; } div#main-content div.paragraph h2.first{ color:pink; }

HTML:

效果：

从上面实例可以看出：

• 第一个样式=2100+21=202
• 第二个样式=2*100+1=201
• 第三个样式=1100+110+3*1=113
• 第四个样式=1100+110+2*1=112
• 第五个样式=1100+110+1*1=111
• 第六个样式=1100+210+3*1=123

雅虎军规建议少用important，所以说ID选择器往往起到至关重要的作用，在实际操作中，如果所应用的样式不起作用，试着在选择器前添加其父元素的ID以增加它的权重。

但我们要注意一点，我们在给元素添加样式时，其选择器尽量控制在三个以内，包含三个。具体原因我不知道，但这样是好的习惯。