今天聊聊css的几个特性层叠性（Cascading）、继承性（Inheritance）和优先级（Specificity）。掌握这几个特性，有助于我们很好的在写样式的时候做到游刃有余。
以下是这些特性的详细解释以及具体的HTML和CSS代码示例。
1. 层叠性（Cascading）
层叠性指的是当多个样式被应用到同一个元素上时，这些样式会根据其来源（如用户代理样式表、用户样式表、作者样式表、内联样式）和重要性（如!important声明）来决定哪个样式最终会被应用到元素上。如果来源和重要性相同，则后出现的样式会覆盖先出现的样式。
HTML示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 层叠性示例</title>
<style>
p {
color: blue; /* 样式1 */
}
.special {
color: red; /* 样式2，将覆盖样式1 */
}
</style>
</head>
<body>
<p class="special">这段文字是红色的。</p>
</body>
</html>在这个例子中，尽管<p>标签有一个color: blue;的样式，但由于<p>元素同时也有special类，该类定义的color: red;样式会覆盖先前的蓝色样式，因此文字最终显示为红色。
2. 继承性（Inheritance）
继承性指的是某些CSS属性值会从父元素自动传递给子元素。不是所有的CSS属性都会继承，只有少数如color、font-family、font-size等具有继承性。
HTML示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 继承性示例</title>
<style>
div {
color: green; /* 父元素的颜色 */
}
</style>
</head>
<body>
<div>
这段文字是绿色的，因为<span>span元素</span>继承了父div的颜色。
</div>
</body>
</html>在这个例子中，<div>元素设置了color: green;，由于color属性是可继承的，所以<span>元素（作为<div>的子元素）也自动继承了绿色文字颜色。
3. 优先级（Specificity）
优先级决定了当多个规则同时应用于一个元素时，哪个规则将被应用。CSS优先级是基于选择器的类型来计算的，例如，内联样式（在HTML元素内部）的优先级高于ID选择器，ID选择器的优先级高于类选择器、属性选择器和伪类选择器，这些又都高于元素选择器和通配符选择器。
HTML示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 优先级示例</title>
<style>
/* 元素选择器，优先级最低 */
p {
color: blue;
}
/* 类选择器，优先级高于元素选择器 */
.highlight {
color: red;
}
/* ID选择器，优先级高于类选择器 */
#special {
color: green !important; /* 使用 !important 强制提高优先级 */
}
</style>
</head>
<body>
<p id="special" class="highlight">这段文字是绿色的，因为ID选择器具有最高优先级，并且使用了!important。</p>
</body>
</html>在这个例子中，尽管<p>元素同时应用了类选择器.highlight（将文字设置为红色）和元素选择器p（将文字设置为蓝色），但由于ID选择器#special具有更高的优先级，并且使用了!important来进一步强调其重要性，因此最终文字显示为绿色。
以下说明了下优先级顺序：从低到高
- 通配符选择器（*）
- 元素选择器（如 p, div）
- 类选择器（如 .classname）
- 属性选择器（如 [type="text"]）
- 伪类选择器（如 :hover）
- ID选择器（如 #idname）
以上就是css的几个特性，我觉得优先级这个还是比较重要的，在代码中经常会遇到