CSS的特性

# 1 层叠性

所谓层叠性是指多种CSS样式的叠加在一起, 同时作用在一个元素时, 最终浏览器以谁为主的问题

原则

后写的样式会覆盖先写的样式

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			color: red;
			font-size: 30px;
		}

		div {
			color: blue;
		}
	</style>
</head>
<body>
	<div>
		 长江后浪推前浪，前浪死在沙滩上。
	</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 2 继承性

子元素会继承父元素==文本==相关的属性

font-
text-
line-
color

示例

一般, 我们会统一给body设置font-size

body {
  font: 16px "Mircosoft Yahei"
}

1
2
3

给父元素设置color

# 3 优先级

# 1) 权重公式

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题

关于优先级，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）权重公式

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

总的原则是, 影响范围越小, 选出的元素越特殊, 权重越高

# 2) 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1

注意

不存在进位

比如, 10个元素选择器叠加在一起, 权重依然没有一个类选择器高

示例

<!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>
      a {
        color: red;
      }
      ul a {
        color: blue;
      }
      .mylink {
        color: green;
      }
      #myli a {
        color: grey;
      }
      #mydiv .mylink {
        color: skyblue;
      }
    </style>
  </head>
  <body>
    <div id="mydiv">
      <ul id="myul">
        <li id="myli"><a href="#" class="mylink">举例</a></li>
      </ul>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

上次更新: 2021/09/03, 15:32:17

← 背景相关属性盒子模型→