目录
CSS有三大特性:层叠性、继承性、优先级
一、层叠性
1、层叠性:相同的选择器若设置相同的样式,那么此时一个样式就会层叠(覆盖)另一个冲突的样式。
2、层叠性主要解决样式冲突问题。
层叠性原则:
- 样式若冲突,遵循就近原则,即那个样式离结构更近就执行哪个样式。
- 样式若不冲突,则不发生层叠,也就是正常执行。
下面来看两个例子:
1)我们给字体加上颜色,但同时加两种色彩,看是否体现层叠性:
可以看到黑色离我们的结构更近,那么来看看效果:
符合层叠性的特性,紫色被覆盖掉了。
2)在紫色的部分加上字体大小,看会不会执行:
来看结果:
满足上述原则。
OK,继续下一个特性!
二、继承性
1、继承性:指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性。
2、在CSS中以text-、font-、line- 开头的属性都是可以继承的。
比如以下代码,其中的body标签中有div和p两个子标签,当更改body标签的颜色时,其子标签也会继承设置的颜色:
<!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>CSS层叠性</title>
<style>
body{
color: blueviolet;
}
</style>
</head>
<body>
<div>这是继承性的体现</div>
<p>这是继承性的体现</p>
</body>
</html>
看看效果:
看样子结果符合继承性。
3、行高的继承性:
- 行高既可以要单位也可不要单位
- 若子元素没有设置行高,则会继承父元素的行高
- 若此时父元素为1.5,则子元素行高为:子元素文字大小*1.5
下一个,优先级!
三、优先级、
1、优先级:当同一个元素指定多个选择器,就会有优先级的产生。
原则:
- 选择器相同,则按照层叠性执行
- 选择器不同,则根据选择器权重执行
选择器权重如下:
选择器 | 权重 |
继承或* | 0 |
元素选择器 | 1 |
类选择器,伪类选择器 | 2 |
ID选择器 | 3 |
行内样式style=“” | 4 |
important | 无穷大 |
我们来选择一两个尝试一下:
1)元素选择器(标签):
<!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>CSS层叠性</title>
<style>
div{
color: blueviolet;
}
</style>
</head>
<body>
<div>这是继承性的体现</div>
</body>
</html>
结果图:
2)类选择器:
<!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>CSS层叠性</title>
<style>
div{
color: blueviolet;
}
.test{
color: blue;
}
</style>
</head>
<body>
<div class = "test">这是继承性的体现</div>
</body>
</html>
结果图:
显然,类选择器器权重要高。那么我们在元素选择器后面加上important会发生什么呢?
3)important:
<!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>CSS层叠性</title>
<style>
div{
color: blueviolet!important;
}
.test{
color: blue;
}
</style>
</head>
<body>
<div class = "test">这是继承性的体现</div>
</body>
</html>
结果图:
可以看到,important是最高的,只要带上!important就会高于一切。
那么以上就是对CSS的三大特性的一个认识,继续下一个学习!GO!GO!GO!