了解一下CSS优先级
浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。
最近在写一些小demo，过程中遇见由于不太熟悉CSS优先级问题而造成的麻烦，所以特地了解和学习了相关的知识，为了避免遗忘，也有助于将来复习，所以记在博客里。
什么是CSS权重
优先级就是分配给指定CSS的权重。有时候当我们辛辛苦苦写完HTML和CSS代码之后，可能会发现实际效果与我们所期待的结果并不完全一样，而我们的CSS样式添加又是正确的，那这时候就要注意可能是CSS权重的问题！让我们先来看看代码
一个简单的div盒子里装着三个div
<div id="box">
<div class="box1">box1</div>
<div>box2</div>
<div>box3</div>
</div>
然后给他们加样式
#box {
width: 200px;
height: 200px;
background: red;
}
/*最外面div盒子设置宽高和背景为红色 */
#box div {
width: 50px;
height: 50px;
background: #ccc;
}
/*将子代div背景色设置为#ccc */
.box1 {
background: green;
}
/* 将box1背景色设置为绿色*/
按照我们上面代码的布置，最后的结果应该是三个子盒子的背景色，box1为绿色，其余两者为#ccc,然而最后的结果却不是这样。而造成这样的原因就是CSS的权重。
那权重到底是什么东西呢？我的理解是，每个选择器都有它的权重，而不同的选择器，它的权重可能是不一样的，而权重大的样式就会覆盖权重小的。
计算权重
大家都知道，CSS的选择器有ID选择器，类选择器，等等。这里我们将其分成四大类，每大类的权重相等。
- 行内样式，html 文档中定义的 style，不包含选择器，直接对元素起作用。
- ID 选择器
- 类（class），属性选择器（attribute selector）和伪类选择器（pseudo-class-selector）
- 元素和伪元素（pseudo-elements）
这样分类完毕之后，我们可以将每大类的权重大小设置为a,b,c,d
- 如果有行内样式，代表其中的样式内容将直接对HTML起作用，那么初始值a=1
- 如果使用ID选择器，ID选择器个数为x，那么b=x
- 使用类或者属性选择器和伪类选择器总数为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>
有几点要注意的是:
- 通配符*不具有特殊性，它的权重值为(0,0,0,0)
- !important 的权重大于任何没有!important的样式,所以一定要慎用!important
霍营市场监督管理所投诉举报电话：010-60787760 | 