本文详细讲解了CSS选择器的优先级公式，包括不同类型的优先级、!important的作用，以及如何进行权重叠加和解决样式冲突。通过实例演示了继承性和标签选择器的应用。
#目标#：能认识不同选择器的优先级公式，能够进行css权重叠加计算，分析并解决css冲突问题
学习路径：
1.继承性
2.层叠性
3.1 优先级
->特性：不同选择器具有不同的优先级，优先级最高的选择器样式会覆盖优先级低的选择器样式
优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
->注意点：
1. !important写在属性值的后面，分号的前面。
2. !importan不能提升继承的优先级，只要是继承优先级便是最低。
3. 实际开发当中不建议使用 !importan。
代码示例：
<style>
#box{
/* id选择器 */
color: green;
}
.box{
/* 类选择器 */
color: yellow;
}
div{
/* 标签选择器 */
color: orange !important;
/* !important不要给继承的添加，自己有样式便无法继承父级样式 */
}
body{
color:red;
/* 继承 */
}
</style>
</head>
<body>
<div class="box" id="box" style="color: blue;">
测试优先级
</div>
</body>
3.2 权重叠加计算
判断步骤：
一>：是不是 !important（优先级最高）
二>:继承（优先级最低）
三>:计算(行内，id，类，标签)
若都是继承，则判断隔代数，属性是隔代数最少的
代码示例：
<style>
/* 隔一代 */
div p{
color: red;
}
/* 隔二代 */
.father{
color: blue;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
<span>
文字
</span>
</p>
</div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
