CSS的三大特性
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS的三大特性。知识学习内容来自b站的@黑马程序员的视频
🚩1.1 层叠性
相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式，比如两个div，一个div设置颜色与字体，另一个div设置不一样的颜色。那么就会选择后面的div的颜色和前面div的字体，因为只有颜色冲突了。
原则
样式冲突遵循就近原则，哪个样式设置距离标签更近，就执行哪个样式
<!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>Document</title><style>div {color: red;font-size: 14px;}div {color: pink;}</style>
</head>
<div>层叠性</div><body></body></html>🚩1.2 继承性
子标签会继承父标签的某些样式如文字的颜色和大小，最主要的就是和文字有关的如text-,font-,line-这些开头的属性，以及color。
常用情况：在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>Document</title><style>body {color: pink;font-size: 14px;}</style>
</head><body><div><p>body已经给我设置好了</p></div>
</body></html>行高的继承性
body {
font:12px/1.5 Microsoft Yahei
}
行高可以不跟单位，采用1.5表示字体大小的1.5倍。这样可以让子元素根据自己的文字大小自动调整行高
<!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>Document</title><style>body {color: pink;font: 12px/1.5 Microsoft Yahei;}div {/* 继承了body的行高，这里是14*1.5=21px */font-size: 14px;}p {font-size: 16px;}</style>
</head>
<div>指定了自己的大小，行高继承为14*1.5px</div>
<p>指定了自己大小，行高继承为16*1.5排序</p>
<ul><li>没指定自己大小，行高继承为12*1.5</li>
</ul><body></body></html>🚩1.3 优先性
当一个元素（标签）指定多个选择器，就会有优先级的问题。如果多个选择器选择了同一个元素，就要根据选择器自身的权重来判断。
|
选择器 |
选择器权重 |
|
继承或者* |
0 |
|
元素选择器 |
1 |
|
类选择器，伪类选择器 |
10 |
|
id选择器 |
100 |
|
行内样式 |
1000 |
注意
继承的权重是0。例如body中指定的文字颜色，但是只要body中的标签有默认值，都会用标签自己的默认值。
复合选择器的权重
复合选择器中的权重会叠加。例如同时设置li和ul li，则用ul li的样式。又比如有.nav li和ul li，则执行.nav li，因为类选择器的权重更大。
<!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>Document</title><style>.nav li {color: red;}.nav .pink {color: pink;font-weight: 800;}</style>
</head><body><ul class="nav"><li class="pink">aaa</li><li>bbb</li><li>ccc</li><li>ddd</li></ul>
</body></html>
