CSS三大特性层叠行继承性优先级1 层叠性
1.1 层叠性定义
相同选取器给同一目的设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
1.2 层叠性特点
遵循原则： 就近原则，哪个样式离目的近，就以哪个样式为准
2 继承性
2.1 继承性定义
子标签会继承父标签的某些样式，如文本颜色和字号等。
2.2 继承性特点恰当的运用继承能够简化代码，降低CSS样式的繁杂性子元素能够继承父元素的样式（text-、font-、line-这些元素研发的能够继承，以及color属性）2.3 继承性重视问题
简写字体属性font代码案例1(行高跟单位状况)：
body{
font: 16px/20px Microsoft YaHei;
} 说明：16px指代字体体积、20px指代行高、Microsoft YaHei指代字体微软雅黑简写字体属性font代码案例2(行高不跟单位状况)：
body{
font: 16px/1.5 Microsoft YaHei;
} 说明：body元素的子元素A，元素A的行高是元素A字体体积的1.5倍3 优先级
3.1 优先级定义
区别选取器给同一目的设置相同的样式，此时会按照选取器权重决定目的的最后样式。
3.2 优先级特点选取器权重1重视：属性选取器的权重为：0,0,1,0
伪元素选取器和标签选取器权重同样：0,0,0,1
3.3 优先级重视问题权重是有4组数字构成，然则不会有进位等级判断从左向右，倘若某一位数值相同，则判断下一位数值继承的权重是0，不管父元素权重多高，子元素得到的权重都是0权重叠加：倘若是组合器选取器，则会有权重叠加，必须计算权重（下面样例说明）<!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>Document</title>
<style>
ul li {
color: green;
}
li {
color: red;
}
.nav li {
color: blue;
}
</style>
</head>
<body>
<ul class="nav">
<li>样例q</li>
<li>样例2</li>
<li>样例3</li>
</ul>
</body>
</html>
ul li选取器的权重是0,0,0,2;
li 选取器的权重是0,0,0,1;
.nav li选取器的权重是0,0,1,1;
因为.nav li选取器的权重更高，因此最后样式已.nav li选取器为准。
| 
发表于 2024-6-30 08:22:27
