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

CSS（引入、权重、特指度、继承）

news 2025/9/11 9:47:33

1. 引入的三种方式

1. 内联样式（Inline Styles）

直接在HTML标签的style属性中定义
```
<div style="color: red;">内容</div>
```

2. 内部样式（Internal/Embedded Styles）

在HTML文档的<head>部分使用<style>标签定义
```
<style>div { color: blue; }
</style>
```

3. 外部样式（External Styles）

通过<link>标签引入外部CSS文件

<link rel="stylesheet" href="styles.css">

2. 权重（优先级规则）<<< 点击查看

3. 特指度(Specificity)

（1）特指度 (Specificity) 计算细节 <<< 点击查看

（2）同等特指度时的规则

当两个选择器具有相同特指度时：

后出现的规则会覆盖先出现的规则（源代码顺序）
在外部样式表中，后加载的样式表会覆盖先加载的样式表

（3）继承 (Inheritance) <<< 点击查看

继承的样式拥有最低的权重，甚至低于元素选择器（类型选择器）。

任何直接应用于元素自身的样式规则，无论其特指度多低（哪怕只是一个简单的元素选择器 p {}），都会覆盖从父元素继承来的样式。

<style>/* 规则A: 继承自父元素 */div { color: blue; } /* 规则B: 直接应用于元素本身，特指度极低 (0,0,1) */span { color: red; } 
</style><div>我是蓝色。<span>我是红色（直接应用的样式覆盖了继承的样式）</span>
</div>
在这个例子里，<span> 的 color 最终是红色。虽然 div { color: blue; } 通过继承也作用在了 <span> 上，但 span { color: red; } 这个特指度极低的规则因为直接应用于元素本身，所以轻松覆盖了继承来的样式。

（4）!important 的特殊情况

!important会打破特指度规则，但多个!important冲突时，仍会比较特指度
用户样式表中的!important优先级高于作者样式表中的!important
作者样式表中的!important优先级高于用户普通样式

（5）可视化特指度工具

用开发者工具，查看特指度：

Chrome DevTools会在样式面板显示选择器的特指度
特指度通常显示为类似"0,1,0,1"的形式

（6）性能考量

虽然CSS选择器特指度对渲染性能影响很小，但了解以下内容有帮助：

过于复杂的选择器可能影响解析性能
建议保持选择器简洁，避免过度嵌套

（7）CSS架构建议

避免过度使用ID选择器和!important
使用类选择器作为主要样式控制方式
采用BEM等CSS方法论来管理特指度

3. 优先级说明

CSS优先级规则的设计基于以下原则：

解决样式冲突：当多个CSS规则同时应用于一个元素时，需要明确规则来确定哪个样式生效
特指度计算：优先级基于选择器的特指度计算
- 内联样式优先级高是因为它直接作用于元素，更"具体"
- ID选择器优先级高于类选择器，因为ID在文档中应该是唯一的
维护性与可预测性：明确的优先级规则使开发者能够预测样式应用结果，便于代码维护
!important的特殊性：作为最高优先级，它用于覆盖其他所有样式，但应谨慎使用，以免造成维护困难