CSS 样式分类、优先级规则
1. 前言
CSS（层叠样式表）是网页设计的核心语言之一，用于控制网页的样式和布局。理解 CSS 样式的分类和优先级规则，可以帮助开发者更高效地编写和维护样式代码，避免样式冲突问题。
2. CSS 样式分类
2.1 行内样式（Inline Styles）
<p style="color: red; font-size: 16px;">这是一段红色文字。</p>
特点：直接写在 HTML 元素的 style 属性中，仅作用于当前元素，优先级最高（仅次于 !important）。
2.2 内部样式表（Internal Stylesheet）
<head>
<style>
p {
color: blue;
font-size: 14px;
}
.text {
font-weight: bold;
}
</style>
</head>特点:通过 <style> 标签嵌入在 HTML 文件中，作用于当前页面所有匹配元素，优先级高于外部样式表。
2.3 外部样式表（External Stylesheet）
<link rel="stylesheet" href="styles.css">
特点： 通过 <link> 标签引入独立的 .css 文件，可被多个页面共享，便于维护和复用。
2.4 用户代理样式（User Agent Styles）
浏览器为 HTML 元素提供的默认样式（如 <h1> 的粗体、<a> 的下划线等）。
3. CSS 优先级规则
3.1 权重计算规则
权重计算规则说明：
权重值越高，优先级越高 当多个选择器作用于同一元素时，权重值相加比较 !important 声明的样式具有最高优先级 权重相同时，后定义的样式会覆盖先定义的样式 继承的样式权重最低，几乎总是被其他样式覆盖
3.2 权重计算示例
示例1：基础选择器对比
<style>
p { color: red; } /* 权重：1 */
.text { color: blue; } /* 权重：10 */
#title { color: green; } /* 权重：100 */
</style><p class="text" id="title">Hello World</p>
生效样式：color: green（ID 选择器权重最高）。
示例2：复合选择器权重累加
<style>
div.content { color: purple; } /* 权重：1 + 10 = 11 */
.content p { color: orange; } /* 权重：10 + 1 = 11 */
#box .item { color: pink; } /* 权重：100 + 10 = 110 */
</style><div id="box" class="content"> <p class="item">Text</p> </div>
生效样式：color: pink（权重 110 最高）。
示例3：相同权重时的覆盖规则
<style>
.text { color: gray; } /* 权重：10 */
.highlight { color: yellow; } /* 权重：10 */
</style><p class="text highlight">Hello</p>
生效样式：color: yellow（后定义的生效）。
示例4：行内样式 vs ID 选择器
<style>
#desc { color: black; } /* 权重：100 */
</style><p id="desc" style="color: brown;">Description</p>
生效样式：color: brown（行内样式权重 1000 > ID 选择器 100）。
示例5：!important 强制优先级
<style>
#footer { color: blue !important; } /* !important 优先级最高 */
#footer { color: red; }
</style><div id="footer" style="color: green;">Footer</div>
生效样式：color: blue（!important 强制覆盖其他规则）。
4. 优先级原理（层叠规则）
来源顺序：后定义的样式覆盖先定义的。 用户样式表：用户自定义样式覆盖浏览器默认样式。 开发者样式表：开发者编写的样式优先级高于浏览器默认样式。
5. 总结
样式分类: 行内样式 > 内部样式表 > 外部样式表 > 用户代理样式
优先级规则: !important > 行内样式 > ID 选择器 > 类/伪类 > 元素选择器 > 通配符
注意事项：
a. 避免滥用 !important
b. 权重相同时，后定义的样式生效
c. 复合选择器的权重需累加计算
通过合理运用这些规则，可以更高效地控制网页样式！
