场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
比较规则：
-
先比较第一级数字，如果比较出来了，之后的统统不看
-
如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
-
……
-
如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
➢ 注意点：!important如果不是继承，则权重最高，天下第一
div #one {
color: aqua;
/* 0,1,0,1 */
// 最大
}
.father .son {
color: black;
/* 0.0.1.0 */
}
.father p {
color: yellow;
/* 0.0.1.1 */
}
div p {
color: tomato;
/* 0.0.0.2 */
}
#father{
color:blueviolet !important;
/* 继承 最低*/
}
div#father.c1{
color: coral;
/* 继承 */
}
<div class="father" class="c1">
<p class="son" id="one" class="c2">我是子标签</p>
</div>
color: blue;
//最大 没有继承
}
div {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>
什么颜色
</div>
</div>
</div>
/* 行内 id 类 标签 */
/* 权重相同此时比较层叠性 */
.c1 .c2 div {
color: blueviolet;
/* 0.0.2.1 */
}
div #box3 {
color: chartreuse;
/* 0.1.0.1 */
}
#box1 div {
/* #box1 div后代 */
color: tomato;
/* 0.1.0.1 */
// 先级相同，则比较层叠性（谁写在下面，谁说了算所以tomato
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
什么颜色
</div>
</div>
</div>
/* 行内 id 类 标签 */
/* 继承特殊情况 */
div p {
color: aqua;
/* 都是继承。看基础能力谁高 所以是aqua */
}
.father {
color: chartreuse;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
<span>文字</span>
</p>
</div>
</body>
/* 行内 id 类 标签 */
/* 继承特殊情况 */
.father {
color: chartreuse;
}
span {
color: coral;
}
.ii{
color: crimson !important;
}
#dd{
color: thistle;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
<span class="size" id="sun">文字</span>
</p>
</div>
</body>
