CSS的三大特性
程序员文章站
2022-06-30 12:33:29
本文内容： 层叠性 继承性 优先级 权重计算方法（特异性） 首发日期：2018-05-01 层叠性： 层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。 比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设... ......
本文内容：
- 层叠性
- 继承性
- 优先级
- 权重计算方法（特异性）
首发日期：2018-05-01
层叠性：
- 层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。
- 比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑“优先级”）
层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。【这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来（包括那些允许设置多个值的属性也会合并，比如text-shadow）。】
示例：
依据层叠性的就近原则，第一个div的背景色为蓝色，第二个div的背景色为绿色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div{
background-color: red;
}
div{
background-color: blue;
}
</style>
</head>
<body>
<div>123</div> <!-- 最终背景颜色是蓝色 -->
<div style="background-color: green;">123</div> <!-- 最终背景颜色是绿色 -->
</body>
</html>
继承性：
- 继承性是指当子标签没有设置样式时，会继承父标签的样式。
- 比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。
可继承的属性比如有字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。）
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div{
font-size:70px;
background-color: #CCC;
color:skyblue;
}
</style>
</head>
<body>
<div>
<p>p继承div的样式</p>
</div>
</body>
</html>
优先级：
- 优先级：!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 【优先级高的规则会忽视层叠性，忽视就近原则来定义样式。比如定义了!important，即使行内样式离得近，最终生效的还是!important标注的属性】
- !important是css的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，最终生效的属性一定是!important标注的属性。
示例：
下面的代码可以从上到下，依次注释选择器来测试优先级。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* 从上到下，依次注释选择器来测试优先级 */
div{
color:green!important;
}
#id1{
color:red;
}
.class{
color: blue;
}
div{
color:purple;
}
</style>
</head>
<body>
<div>!import优先级</div>
<div style="color:red">行内样式优先级</div>
<div id="id1">id选择器优先级</div>
<div class="c1">类选择器优先级</div>
<div>标签选择器优先级</div>
</body>
</html>
上面的规则!important和行内样式毫无疑问，但如果多个选择器混杂来定义样式的时候如何判断他们的优先级？答案是依据权重来判断。
权重计算方法【可以称为是css的特异性】：
- 几个规则：
- 权重使用四个数字来衡量(x,x,x,x)【CSS2使用三位】
- 继承的权重为(0,0,0,0)
- 标签选择器的权重为(0,0,0,1)
- 类、伪类选择器的权重为(0,0,1,0)
- id选择器选择器的权重为(0,1,0,0)
- 行内样式的权重为(1,0,0,0)
- !important的权重无限大
- 计算方法：
- 多个选择器混杂时，权重之和也是用四个数字来组成，每一位的值为多个选择器四个数字的每位之和，比如div:first-child的权重为(0,0,0,1)+(0,0,1,0)=(0,0,1,1)，比如div ul li 为(0,0,0,3),比如a:hover为(0,0,1,1)
- 权重之和的数制是不会进位的，再多的标签选择器权重加和也抵不过一个类选择器。
- 多个选择器之间的顺序是无关的，不影响权重之和。
- 注意：对于并集选择器来说不是权重的加和，因为理论上它还是独立的，它只相当于将多个选择器的相同内容归于一个并集选择器中，理论上每一个选择器还是独立的。
示例：
权重相同时，考虑就近原则：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div .p1{
background-color:blue;
}
p.p1{
background-color:green;
}
</style>
</head>
<body>
<div>
<p class="p1">123</p> <!-- 最终颜色为绿色 -->
</div>
</body>
</html>权重不同时，权重大的生效：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p.p1:first-child{
background-color:green;
}
div .p1{
background-color:blue;
}
</style>
</head>
<body>
<div>
<p class="p1">123</p> <!-- 最终颜色为绿色 -->
</div>
</body>
</html>