re:从0开始的CSS学习之路 3. CSS三大特性-编程知识

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,0id选择器								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>