CSS优先级
背景
今天碰到css的一个小问题，于是重温一下css选择器的优先级的问题
计算优先级
优先级是根据由每种选择器类型构成的级联字串计算而成的。他是一个对应匹配表达式的权重。 如果优先级相同，靠后的 CSS 会应用到元素上。
注意：元素在DOM树的位置不影响优先级
优先级顺序
优先级逐级增加的选择器列表：
- 通用选择器(*)
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID选择器
- 内联样式
基于类型的优先级
优先级是根据选择器类型进行计算的，下面有个例子可以说明一下这个选择优先级，虽然属性选择器里使用的ID，但是优先级还是没有ID选择器高，因此应用到元素上的样式为第一种
* #foo {
color: green;
}
*[id="foo"] {
color: purple;
}将其用到下面的HTML中
<p id="foo">I am a sample text.</p>演示例子： <iframe width="100%" height="300" src="https://jsfiddle.net/donqi/vmo5m3re/embedded/result,css,html,js/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
选择器优先级一致
优先级相同的情况下，后面定义的会覆盖前面定义的样式，classList里的顺序并不影响结果 举例：
<div class="box padding border"></div>
<div class="box border padding"></div>
<div class="padding box border"></div>CSS:
div{
height:100px;
width:100px;
padding:20px;
margin:20px;
border:10px solid hsla(0,0%,0%,0.5);
background-color:#ccc;
background-image:url("/favicon.png");
background-repeat:space;
background-origin:content-box;
}
div.box{
background-clip:content-box;
}
div.border{
background-clip:border-box;
}
div.padding{
background-clip:padding-box;
}演示例子：
最后说两句
这里说的是css选择器的优先级，对于到底表现哪种样式，还有一点特别重要，css解析器是从右到左的顺序解析的。比如上面的例子中，会先寻找id为”foo”的元素
* #foo {
color: green;
}为什么要这么做呢，下回再说
