re:从0开始的CSS学习之路 3. CSS三大特性-CSDN博客

本文链接：https://blog.csdn.net/qq_40394751/article/details/136062572

本文详细介绍了CSS的三个重要特性：层叠性（元素样式覆盖规则）、优先级（不同选择器权重决定样式应用）、以及继承性（样式传递给后代元素）。通过实例演示了这些特性的实际操作和注意事项。

摘要由CSDN通过智能技术生成

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>