re:从0开始的CSS学习之路 3. CSS三大特性
0. 写在前面
很多的学习其实并不知道在学什么，学一个新东西学着学着就变成了抄代码，背概念。把看视频学习变成了一个赶进度的任务，到头来只学到了一些皮毛。
文章目录
- 0. 写在前面
- 1. CSS三大特性——层叠性
- 2. CSS三大特性——优先级
- 3. CSS三大特性——继承性
1. CSS三大特性——层叠性
层叠性：相同选择器（同等权重）对同一个元素设置样式时
不冲突的样式：样式都生效
冲突的样式：会根据“就近原则”，书写位置接近元素的样式会将位置远的样式覆盖
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Characteristics - Stackability</title>
.div1 {
color: red;
}
.div1 {
font-size: 50px;
color: yellowgreen;
}
</head>
<body>
<div class="div1">我是div1</div>
</body>
</html>
实际上层叠性就是说，最底下的样式会最优先生效，这并不难理解，实际上就和程序的执行顺序一样
2. CSS三大特性——优先级
优先级：（权重）不同选择器选择同一个元素，并且设置相同样式时，CSS会根据优先级选择使用样式。
选择器的权重：
行内样式 1,0,0,0
id选择器 0,1,0,0
类、属性、伪类选择器 0,0,1,0
标签选择器 0,0,0,1
通配符、继承 0,0,0,0
注意：
- 权重由四位整数组成，权重高优先执行。
- 权重从左到右依次比较，如高位相同，则比较下一位
- 权重可以叠加，但是不会进位
- 选择器分组单独计算
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Characteristics - priority</title>
/* #d1 {
color: yellowgreen;
} */
/* 0,0,0,1+0,0,1,0=0,0,1,1 */
div[class="div1"] {
color: orange;
}
/* 0,0,1,0+0,0,1,0=0,0,2,0 */
.div1.div2 {
color: red;
}
</head>
<body>
<div class="div1" id="d1">我是div</div>
</body>
</html>
可以看到每一位的优先级都是独立计算的，而且不会进位
这里的属性选择器实际上是两部分组成：标签选择器+属性选择器，这也是在2. 选择器超长大合集中提到过的
3. CSS三大特性——继承性
继承性：一个元素的某些样式可以被后代元素继承
优点：合理使用继承性，可以简化代码
注意：
- 通常文本、字体相关样式可以继承。但是背景、布局相关的样式不会被继承。
a链接不能继承文本颜色与下划线h标题标签不能继承字体大小
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>three Characteristics - Inheritance</title>
.father {
color: red;
background-color: #c7decc;
}
body {
font-size: 20px;
}
</head>
<body>
<div class="father">
我是father
<div class="son">我是son</div>
<span>我是孙子span</span>
<a href="#">超链接</a>
<h1>我是标题</h1>
</div>
</body>
</html>
可以看到father里面的标签继承了father的样式，father整个的继承了body的字体大小也就是font-size。
也可以看到a不能继承字体的颜色，h不能继承字体的大小