7 选择器优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。
/*
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
1 内联样式表的权值最高 style="" 1000；
2 统计选择符中的ID属性个数。 #id 100
3 统计选择符中的CLASS属性个数。 .class 10
4 统计选择符中的HTML标签名个数。 标签名 1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器的优先级</title>
</head>
<style>
/*
行内选择器:1000 id:100 class:10 标签名:1
!important
*/
/*#i1{*/
/* color: red;*/
/*}*/
/*.c1{*/
/* color: gold;*/
/*}*/
/*div{*/
/* color: blue;*/
/*}*/
/*.c2 .c3 .c5{*/
/* color: red;*/
/*}*/
/* #i2{*/
/* color: rebeccapurple;*/
/* }*/
/*.c2 .c4 div{*/
/* color: green;*/
/*}*/
/*.c2 .c3 .c4 div{*/
/* color: lightcoral;*/
/*}*/
/*.c2 .c4 .c5{*/
/* color: lightskyblue;*/
/*}*/
/*.c5{*/
/* color: chartreuse!important;*/
/* }*/
</style>
<body>
<div id="i1" class="c1">alvin</div>
<div class="c2">
<div class="c3">
<div class="c4">
<div class="c5" id="i2" style="color: orange">item</div>
</div>
</div>
</div>
</body>
</html>