目录
层叠性
当为相同选择器设置相同类型的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。(等价于一个标签内出现了相同的属性)
层叠性主要解决样式冲突的问题
层叠性原则:
- 样式不冲突,不会层叠
- 样式冲突,遵循的原则后来者居上,即后面的样式会覆盖前面的样式
例如下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠性问题</title>
<style>
/* 先创建红色的文本样式 */
div {
color: red;
}
/* 再创建蓝色的文本样式 */
div {
color: blue;
}
</style>
</head>
<body>
<div>这是一个文本</div>
</body>
</html>
在上面的代码中,因为蓝色文本样式在红色文本样式之后,所以使用蓝色样式,而非红色样式,这种效果同样适用于写在一个标签内的情况,例如下面的代码:
<style>
div {
color: red;
color: blue;
}
</style>
对于有多种样式的情况下,则只会覆盖相同的样式,不会影响没有重复的样式,例如下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠性问题</title>
<style>
/* 先设置一个红色文本样式 */
div {
color: red;
}
/* 接着设置一个蓝色文本样式并修改字体为微软雅黑 */
div {
color: blue;
font-family: 'Microsoft YaHei';
}
</style>
</head>
<body>
<p>段落标签:这是字体对比</p>
<div>这是一个内容</div>
</body>
</html>
在上面的代码中,第一个div
标签选择器中设置了字体颜色,第二个div
标签选择器中设置了字体颜色和字体系列,所以字体颜色会以第二个选择器中的为主,但是字体系列不会被覆盖,因为第一个选择器中没有字体系列属性
继承性
子标签会继承父标签的某些样式,如文本颜色和字号。恰当地使用继承可以简化代码,可以降低 CSS 样式的复杂性。
子元素可以继承父元素的样式:text-
,font-
,line-
这些元素开头的可以继承,以及color
属性
继承示例
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承性</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<!-- 改变div标签样式同时会改变span标签的样式 -->
<div>
这是父标签中的内容样式<br />
<span>这是一个div标签中的span子标签</span>
</div>
</body>
</html>
效果如下:
但是不会继承修改盒子高度、宽度以及背景颜色等属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承性</title>
<style>
h1{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<h1>
这里是标题样式
<div>
这里是div标签
</div>
</h1>
</body>
</html>
继承信息:
行高继承
对于行高来说,子代也会继承父代的行高属性,例如下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行高继承</title>
<style>
div{
width: 200px;
height: 200px;
line-height: 20px;
}
</style>
</head>
<body>
<div>
这个是div标签中内容的行高
<span>这个是div标签中span子标签中的行高</span>
</div>
</body>
</html>
效果如下:
上面的代码显示了固定行高的继承,但是在CSS中,当字体属性写成综合写法时,例如下面的代码:
选择器 {
font: 12px/1.5 'Microsoft YaHei'
}
此时代码中的1.5并不是值行高1.5,而是行高为当前字体大小的1.5倍,即12 * 1.5 = 18为当前行高,此时如果子代设置了自己的字体,那么子代继承父代的行高之后会改变为子代字体大小*1.5=子代字体的行高,例如下面的代码:
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行高的继承</title>
<style>
div{
font: 12px/1.5 'Microsoft YaHei';
}
/* 指定子代标签的字体大小 */
div .fontStyle{
font-size: 20px;
}
/* span标签本身是行元素,将其转换为块元素才能观察到效果 */
span{
display: block;
}
</style>
</head>
<body>
<!-- 未指定子代标签的字体大小 -->
<div>
这个是div标签中内容的行高
<span>这个是div标签中span子标签中的行高</s>
</div>
<!-- 指定子代标签的字体大小 -->
<div>
这个是div标签中内容的行高
<span class="fontStyle">这个是div标签中span子标签中的行高</span>
</div>
</body>
</html>
效果如下:
优先级
当同一个元素指定多个选择器,就会有优先级的产生。
- 选择器相同,则执行层叠性
- 选择器不同,则根据选择器权重执行
选择器 | 权重 |
继承或 | 0, 0, 0, 0 |
标签选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内 | 1,0,0,0 |
| ∞ |
注意:
- 权重是有4组数字组成,不会存在从后一位向前一位进位的情况
- 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推
- 等级判断从左向右,如果某一位数值相同,则判断下一位数值
- 继承的权重是0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优先级</title>
<style>
/* 对于基础选择器来说,直接按照优先级决定 */
p{
color: red;
}
.blue {
color: blue;
}
/* 对于继承来说,子代不会继承父代的优先级 */
span {
color: green;
}
</style>
</head>
<body>
<!-- 类选择器的优先级更高 -->
<p>这是一个文本内容</p>
<p class="blue">这是一个内容</p>
<!-- 尽管父代是类选择器,优先级更高,但是子代是继承,优先级低,所以不会被覆盖 -->
<div class="blue">
<span>这是一个内容</span>
</div>
</body>
</html>
效果如下:
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重,计算方式即为对应为相加不进位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器优先级</title>
<style>
/* 对于ul li来说,由于ul和li均为标签选择器,所以优先级为0001+0001=0002 */
ul li{
color: red;
}
/* 对于ul来说,由于ul为标签选择器,所以优先级为0001 */
ul {
color: blue;
}
/* 基础选择器+类选择器,所以优先级为0001+0010=0011 */
ul .green {
color: green;
}
</style>
</head>
<body>
<ul>
<!-- 后代选择器覆盖基础标签选择器 -->
<li>这是一个文本内容</li>
<li class="green">这是一个文本内容</li>
<li>这是一个文本内容</li>
</ul>
</body>
</html>
效果如下:
链接标签只能指定修改样式的原因分析:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接伪类选择器优先级分析</title>
<style>
body {
color: red;
}
/* 指定样式 */
.black {
color: #000;
text-decoration: none;
}
</style>
</head>
<body>
<!-- 因为链接选择器继承自body 所以链接的文字颜色为红色,但是CSS默认给了链接一个默认的样式,由于标签选择器的优先级高于继承,所以链接样式无法被覆盖 -->
<a href="#">这是一个链接</a>
<a class="black" href="#">这是一个链接</a>
</body>
</html>
效果如下:
默认样式:
指定后的样式