一、CSS三大特性之优先级
1. 权重叠加
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重叠加</title>
<style>
/* 复合选择器会有权重叠加的问题 */
/* 权重虽然会叠加，但永远不会有进位 */
/* ul li 权重为：0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
ul li {
color: steelblue;
}
/* 此处li 的权重为 0,0,0,1 */
li {
color: pink;
}
/* 综上，所以才会最终执行的是上面的复合选择器 */
/* .nav li 权重为：0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
color: tan;
}
</style>
</head>
<body>
<ul class="nav">
<li>狮子王</li>
<li>忠犬八公</li>
<li>猫和老鼠</li>
</ul>
</body>
</html>
权重叠加小测试：
- div ul li ---------> 0,0,0,1 + 0,0,0,1 + 0,0,0,1 = 0,0,0,3
- .nav ul li --------> 0,0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2
- a:hover --------> 0,0,0,1 + 0,0,1,0 = 0,0,1,1
- .nav a ----------> 0,0,1,0 + 0,0,0,1 = 0,0,1,1
2. 权重练习题
练习题1：下面的代码执行的是哪一个样式？红色？绿色？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重练习题</title>
<style>
.nav {
color: red;
}
li {
color: green;
}
/* 最终执行的一定是后面单独定义的，因为前者是继承，继承的权重为 0 */
</style>
</head>
<body>
<ul class="nav">
<li>人生四大喜</li>
<li>久旱逢甘霖</li>
<li>他乡遇故知</li>
<li>洞房花烛夜</li>
<li>金榜题名时</li>
</ul>
</body>
</html>
最终执行的样式一定为绿色：因为前者是继承，继承的权重为 0,0,0,0；而单独定义的li 为标签选择器，权重为 0,0,0,1，后者权重比前面高，故执行绿色样式。
练习题2：按照下面的代码，最终第一个li 是什么样式？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重练习题02</title>
<style>
.nav li {
color: blue;
}
/* 需求：把第一个li 颜色改为 粉色加粗 */
/* pink 权重为 0,0,1,0，.nav li 的权重为 0,0,1,1 前者权重大，
由于颜色样式有冲突，所以执行权重大的，而字体加粗样式没有冲突，故执行了 pink的代码 */
.pink {
color: pink;
font-weight: 700;
}
/* 若改成.nav .pink 则权重变为0,0,2,0 比.nav li 的权重为 0,0,1,1大，此时就会执行.nav .pink里面的代码样式 */
/* .nav .pink {
color: pink;
font-weight: 700;
} */
</style>
</head>
<body>
<ul class="nav">
<li class="pink">人生四大喜</li>
<li>久旱逢甘霖</li>
<li>他乡遇故知</li>
<li>洞房花烛夜</li>
<li>金榜题名时</li>
</ul>
</body>
</html>
按照上面的代码，最终的结果是“人生四大喜”变成加粗的蓝色字体；
原因如下：
- pink 权重为 0,0,1,0，.nav li 的权重为 0,0,1,1 前者权重大，由于颜色样式有冲突，所以执行权重大的，而字体加粗样式没有冲突，故执行了 pink的代码
当.pink 变为 .nav .pink后，最终结果是“人生四大喜”变成加粗的粉色字体；
原因如下：
- .nav .pink 则权重变为0,0,2,0 比.nav li 的权重为 0,0,1,1大，此时就会执行.nav .pink里面的代码样式
