前端知识基础

1.通配符选择器  权重（权值） 0
2.标签选择器  权重（权值） 1
3.类（class）选择器  权重（权值） 10
4.id选择器  权重（权值） 100

行间样式的权重（权值） 1000


优先级越高就会显示谁的样式

样式被划掉---就是被优先级高的样式覆盖了

css选择器优先级规则：
1.权重越大，优先级越高,  优先级越高就会显示谁的样式
id选择器的优先级>类选择器的优先级>标签选择器的优先级>通配符选择器的优先级
2.行间样式的优先级高于id选择器的优先级
3.优先级最高，高于行间样式的优先级
!important
在css样式后面加上!important
important:重要的意思
4.选择器相同的情况下，后写的会覆盖先写的
5.复合选择器的权值等于所有单一选择器权值的累加


/* 权值：  10+1=11
.wrap  10
h1    1

*/
.wrap h1 {
color: tomato;
}

/* 权值：  10+10=20
.wrap  10
.box    10

*/
.wrap .box {
color: pink;
}

/* 20>11  所以：显示粉色 */

/* 
权值：  10+10+100=120
.wrap  10
.f   10
#b  100
*/
.wrap .f #b {
background-color: aqua;
}

<div class="wrap">
    <h1 class="box">疫情--退退退退</h1>

    <div class="f">
        <div id="b">bb</div>
    </div>
</div>