当前位置：首页 > news >正文

CSS的三大特性：层叠、继承与优先级

news 来源：原创 2025/4/30 6:31:43

CSS作为网页设计的核心语言，其三大核心特性——层叠性、继承性和优先级共同构成了样式表现的底层逻辑。理解这些特性将帮助开发者写出更优雅、更易维护的样式代码。

一、层叠性（Cascading）

1.1 核心概念

"层叠"指多个样式规则同时作用于同一元素时，浏览器通过特定规则确定最终样式的过程。这种特性如同透明薄膜的叠加，最终呈现综合效果。

1.2 层叠规则

相同的属性会覆盖，后面的CSS属性会覆盖前面的CSS属性
不同的属性会叠加，不同的CSS属性都会生效

<!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: 50px;}div{color: rebeccapurple;font-weight: 700;}</style>
</head>
<body><!-- 覆盖和叠加 --><div>我是div盒子属性</div>
</body>
</html>

运行结果：

二、继承性（Inheritance）

2.1 基本规则

子元素自动继承父元素的某些样式属性，主要涉及文本相关属性：

可继承属性示例：

font-family, font-size
color, text-align
line-height, list-style

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS三大特性</title><style>body{color:rgb(37, 66, 66);font-size: 30px;background-color:rgb(238, 238, 238);font-weight:700 ;font-family: "宋体";}</style>
</head>
<!-- 继承性：子级默认继承父级的文字控制属性 -->
<body><div>div 标签</div><p>p 标签</p><span>span 选择器</span><!-- 如果标签自己有样式则生效最自己的样式 a标签有自己的字体颜色 不继承父级文字的颜色属性 --><a href="#">a 标签</a><!-- h1自己有字体大小和字体的样式，那么就生效自己的，不继承父级样式 --><h1>我是大标题h1标签</h1>
</body>
</html>

运行结果：

注意事项：

1、子级继承的是父级的文字控制属性

2、如果自己有自己的文字样式，那么不会继承父级的文字样式（可以理解为覆盖），显示自己的文字样式

3、如果子级没有自己的文字样式，那么才会继承父级的文字样式

三、优先级（Specificity）

优先级规则：

（1）简单选择器：优先级：也叫权重，当一个标签使用了多个选择器时，基于不同类型的选择器的匹配机制（记忆技巧：选择器的标签范围越大，优先级越低）

公式：*<标签<类<id<行内样式<！important

（2）复合选择器：

CSS优先级的计算规则为：!important > ID选择器数量 > 类选择器数量 > 标签选择器数量，

并且优先级值按以下格式计算：(a,b,c,d)，其中：

a: 表示!important的使用次数。

b: 表示ID选择器的数量。

c: 表示类选择器、属性选择器和伪类的数量。

d: 表示标签选择器和伪元素的数量。

下面将会通过几个例子带大家来理解一下复合选择器的优先级：

案例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>/* 行内样式>id选择器个数>类选择器个数>标签选择器个数 *//* 0,0,2,1 */.c1 .c2 div{color: aqua;}/* 0,1,0,1 */div #box3{color: rebeccapurple;}/* 0,1,1,0 */#box1 .c3{color: blue;}</style>
</head>
<body><div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">这行文本是什么颜色</div></div></div>
</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>Document</title><style>/* 行内样式>id选择器个数>类选择器个数>标签选择器个数 */div p{color: blueviolet;}/* 有继承，继承权重最低 */.father{color: brown;}</style>
</head>
<body><div class="father"><p class="son">猜猜我是什么颜色？</p></div>
</body>
</html>

运行结果：

案例3：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第三题</title><style>/* （0,2,0,0） */#father #son{color:blue;}/* （0,1,1,1） */#father p.c2{color: aquamarine;}/* （0,0,2,2） */div.c1 p.c2{color: red; }#father{/* 继承设置的!important,继承权重最低，！important用晚了 */color: rebeccapurple!important;}/* 继承 */div#father.c1{color: yellow;}</style>
</head>
<body><div id ="father" class="c1" ><p id ="son" class="c2">这行文本是什么颜色？</p></div>
</body>
</html>

运行结果：