一、层叠性
说明:什么是层叠性,层叠性就是相同选择器设置相同的样式,此时一个样式就会覆盖另一个冲突的样式,让我们用案例来说明一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
color: red;
}
div {
color: blue;
}
</style>
</head>
<body>
<div>测试案例</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>Document</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>测试文字</p>
</div>
</body>
</html>
请看代码,我并没有给p标签的文字设置颜色,只是给他的父标签设置了颜色,这就是css的继承性,让我再看浏览器中的调试器。
总结一下:
- 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)
- 恰当的使用继承可以简化代码,降低css样式的复杂性
三、优先级
说明:当同一个元素指定多个选择器,就会有优先级的产生。选择器不同的按优先级执行,按优先级执行就会有一个权重的概念,说白了就是哪个选择器优先级高,我们先看下面的表,这就是各个选择器的优先级。值越大的优先级就越高。
选择器权重表:
选择器 | 选择器权重 |
---|---|
继承,* | 0000 |
元素(标签)选择器 | 0001 |
类选择器,伪类选择器 | 0010 |
ID选择器 | 0100 |
行内样式 | 1000 |
!important | 无穷大 |
接下来我们看一个案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.test {
color: blue;
}
div {
color: red;
}
</style>
</head>
<body>
<div>
<p class="test">测试文字</p>
</div>
</body>
</html>
看到的效果是蓝色,在对照表中的优先级,类选择器比标签选择器的优先级高所以呈现的效果就是蓝色。
总结一下:
- 选择器相同的,则按层叠性执行
- 选择器不同的,则根据选择器的权重执行就是选择器的优先级执行。