css 层叠样式表详解
“层叠”意味着：在给 同一个标签 的 同一个属性 设置 不同属性 时，样式发生了冲突，这时：
1. 如果冲突的属性都是同一种命名方式:
以<style>标签中最后设置的那个属性值为准（因为代码解析顺序是从上到下）；
<head>
<style>
.box {
background: red;
}
.item {
background: yellow;
}
</style>
</head>
<body>
<div class="item box"></div>
</body>[说明]：上述代码中：
div 标签中，class属性有两个属性值，分别为 item 和 box。
style 标签中，box属性有一个background属性，其属性值为red；item也有一个background属性，其属性值为yellow。
由于 box 和 item 都是 class命名法，所以此时 background属性的属性值，以排在最后的item中的为准，所以 div 标签的背景色最终为 yellow。
（class="item box"中，class 属性的属性值不分先后顺序，等同于class="box item"）
2. 如果冲突的属性属于不同的命名方式：
以<style>标签中权重高的那个属性值为准：
<head>
<style>
#box {
background: red;
}
.item {
background: yellow;
}
</style>
</head>
<body>
<div id="box" class="item"></div>
</body>[说明]：上述代码中：
.item 权重小于 #box;
.item无法覆盖 #box, 所以div的背景色最终为 yellow。
我建了一个前端小白交流群，添加进入交流群。我会给大家分享我收集整理的各种学习资料，组织大家一起做项目练习，帮助大家匹配一位学习伙伴互相监督学习，欢迎加入
编辑于 2022-03-07 10:59