HTML/CSS/JS学习笔记 Day7（CSS--C4 CSS的三大特性）
跟着该视频学习，记录笔记：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358
Day6 内容梳理：
目录
CSS 4.CSS的三大特性
4.0 概述
CSS有三个特性：层叠性、继承性、优先级。
4.1 层叠性
如果给相同的选择器设置相同的样式但赋值不同，会导致一个样式覆盖掉（或叫层叠）另一个冲突的样式。层叠性主要用于解决样式用途的问题。
层叠性原则：
样式冲突：遵循就近原则，哪个样式离结构更近就执行哪个样式。
样式不冲突：不会层叠。
样式冲突的情况：
比如给一句话先后赋红色、蓝色，由于代码都是对代码颜色进行赋值，所以离p更近的color: blue会被留下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠性</title>
<style>
p {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>这是一句话。</p>
</body>
</html>
样式不冲突的情况：
先给<p>里的一句话赋红色并设置字体为40px，再给这句话赋蓝色，可以看到这句话变成了40px且为蓝色。样式冲突只发生在颜色之间，不影响字体大小的赋值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠性</title>
<style>
p {
color: red;
font-size: 40px;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>这是一句话。</p>
</body>
</html>
4.2 继承性
子标签会继承父标签的某些样式，比如文本颜色、字号、行距等等。恰当地使用继承可以简化代码。
比如在<div>标签中写个子标签<p>，<p>会继承<div>的样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承性</title>
<style>
div {
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<div>
<p>这是div里的子标签</p>
</div>
</body>
</html>
补充：文字的行高也具有继承性，除了以px的形式表示以外，还可以用倍数的形式来表示。
比如在body里放div标签、p标签，并把body的行高设为1.5倍，发现如果div和p各自的字体大小如果设置得不同的话，最后行高也不同：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承性</title>
<style>
body {
color: red;
font: 20px/1.5 'Microsoft Yahei';
}
p {
/* 意思是将p标签的文字设为30px，再加上继承了body里的1.5倍行高（45px） */
font-size: 30px;
}
</style>
</head>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
</body>
</html>
4.3 优先级
当为同一个元素指定了多个选择器时，就会产生优先级。
如果选择器相同，就出现了层叠性，会根据就近原则去实施最近的选择器；
如果选择器不同，就根据选择器的权重来确定优先执行谁。
权重优先级
!important > 行内样式style=”” > ID选择器 >类选择器 > 元素选择器 > 继承自父类的格式
以下逐一讨论每种情况。
情况1：类选择器 > 元素选择器
即使类选择器写在元素选择器上面，但由于权重而非就近原则，所以仍显示类选择器的修改，因为类选择器（标蓝了）的权重高于元素选择器（标天蓝），所以字体呈现蓝色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优先级</title>
<style>
.A {
/* 这是类选择器 */
color: blue;
}
div {
color: skyblue;
}
</style>
</head>
<body>
<div class="A">这是一句话，它的颜色会显示出当前优先级最高的选择器是谁</div>
</body>
</html>
情况2：ID选择器 > 类选择器
字体会呈现用ID选择器选中的样子（橘色）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优先级</title>
<style>
#B {
/* 这是ID选择器 */
color: orange;
}
.A {
/* 这是类选择器 */
color: blue;
}
div {
color: skyblue;
}
</style>
</head>
<body>
<div class="A" id="B">这是一句话，它的颜色会显示出当前优先级最高的选择器是谁</div>
</body>
</html>
情况3：行内选择器style > ID选择器
行内选择器的颜色标为红，ID选择器标为橘，最终由于优先级会显示为红色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优先级</title>
<style>
#B {
/* 这是ID选择器 */
color: orange;
}
.A {
/* 这是类选择器 */
color: blue;
}
div {
color: skyblue;
}
</style>
</head>
<body>
<div class="A" id="B" style="color:red">这是一句话，它的颜色会显示出当前优先级最高的选择器是谁</div>
</body>
</html>
情况4：!important > 行内选择器style
被标为天蓝色的元素选择器的权重是最低的，但如果加上!important，又会变为权重最高的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优先级</title>
<style>
#B {
/* 这是ID选择器 */
color: orange;
}
.A {
/* 这是类选择器 */
color: blue;
}
div {
color: skyblue !important;
}
</style>
</head>
<body>
<div class="A" id="B" style="color:red">这是一句话，它的颜色会显示出当前优先级最高的选择器是谁</div>
</body>
</html>
情况5：继承的权重最小
子类继承父类后，权重变为最低，此时如果对父类和该标签都做了修改，则实施标签的修改而非父类的。
比如父类是字体颜色为蓝的ID选择器，子类标签为橘色，最后显示橘色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优先级</title>
<style>
#father-class {
/* 这是ID选择器 */
color: blue;
}
p {
color: orange;
}
</style>
</head>
<body>
<div id="father-class">
<p>这是一句话，它的颜色会显示出当前优先级最高的选择器是谁</p>
</div>
</body>
</html>
权重叠加
复合选择器中会出现权重叠加的情况，此时需要计算权重。
权重会有叠加（直接相加），但是永远不会有进位。
| 类型 | 权重 |
| 继承自父类的样式 | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式style=”” | 1，0，0，0 |
| !important | 无穷大 |
比如下面的几个例子。
例1：元素选择器累加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重累加</title>
<style>
ul li {
/* 权重是0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
color: blue;
}
li {
/* 权重是0,0,0,1 小于上面的ul-li权重,所以字体呈现蓝色 */
color: orange;
}
</style>
</head>
<body>
<ul>
<li>这是一句话，它的颜色会显示出当前累加优先级最高的复合选择器</li>
</ul>
</body>
</html>
例2：类选择器和元素选择器累加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重累加</title>
<style>
.add li {
/* 权重是类选择器+标签选择器,也就是0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
color: red;
}
ul li {
/* 权重是0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
color: blue;
}
li {
/* 权重是0,0,0,1 小于上面的ul-li权重,所以字体呈现蓝色 */
color: orange;
}
</style>
</head>
<body>
<ul class="add">
<li>这是一句话，它的颜色会显示出当前累加优先级最高的复合选择器</li>
</ul>
</body>
</html>
其他例子：
div-ul-li：0，0，0，3【因为div、ul、li都是标签0，0，0，1.三标签叠加得到】
.nav-ul-li：0，0，1，2【.nav是类选择器0，0，1，0。而ul和li都是标签】
a:hover：0，0，1，1【:hover是伪类选择器0，0，1，0。a属于标签。】
.nav a：0，0，1，1【.nav是类选择器0，0，1，0。a是标签0，0，0，1】
实际应用的例子：
使用权重累加可判断某些更改是否会起效，比如我想把第一句话改成蓝色，但由于它的叠加权重不是最大的所以无法更改成功，见下方代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重叠加的实际应用</title>
<style>
.red li {
/* 权重是类选择器+标签选择器,也就是0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
color: red;
}
.blue {
/* 权重是0,0,1,0，小于上面的red-li，所以第一句话不会变为蓝色 */
color: blue;
}
</style>
</head>
<body>
<ul class="red">
<li class="blue">第一句话</li>
<li>第二句话</li>
<li>第三句话</li>
<li>第四句话</li>
</ul>
</body>
</html>原文地址：https://blog.csdn.net/m0_75036068/article/details/142373968
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！