网站
引入
在实际开发中，一个元素可能会被多条 CSS 规则同时选中，这些规则可能设置了相同的属性但不同的值。
例如，一个段落可能被元素选择器 p、类选择器 .text、ID 选择器 #intro 同时选中，它们都设置了文字颜色，那么最终应该显示哪个颜色？
CSS 优先级规则就是用来解决这种冲突的。
正文
定义
内联、内部、外部优先级和选择器优先级
内联 内部 外部样式
内联样式优先级最高，内部和外部样式其次，例如：
<head>
<style>
p {
color: orange;
}
</style>
<link rel="stylesheet" href="优先级.css">
</head>
<body>
<p style="color: red;">color</p>
</body>优先级.css
p
{
color: green;
}最后看到的文本颜色为 red
选择器优先级
ID 选择器优先级最高，类、伪类、属性选择器其次，元素选择器最低
通过添加 !important 赋予最高优先级，如 color: red !important;，写在分号前
继承
CSS 继承是指设置在父元素上的某些样式，会自动“传递”给它的子元素。
可以继承的（通常是文字相关的）：
color（颜色）font-family/font-size/font-weight（字体相关）line-height（行高）text-align（对齐方式）visibility（可见性）
不可继承的（通常是布局相关的）：
width/height（宽高）margin/padding（间距）border（边框）background（背景）position（定位）
属性
inherit：强制继承。让原本不继承的属性也从父元素那拿值initial：重置。不管父元素是什么，直接变回浏览器默认的样子unset：不确定。如果该属性默认能继承就继承，不能继承就变回默认
特点
- 内联样式（写在
style属性中）优先级最高 - ID 选择器优先级高于类选择器
- 类选择器优先级高于元素选择器
!important可以提升优先级，但不建议滥用- 相同优先级时，后写的样式会覆盖先写的样式
- 继承的样式优先级最低，任何直接设置的样式都会覆盖继承的样式
- 选择器越具体，优先级越高
注意事项
- 尽量避免使用
!important，它会让优先级规则变得混乱 - 如果样式冲突，先检查选择器优先级，再检查书写顺序
- 内联样式虽然优先级高，但会让样式和 HTML 耦合，不利于维护
- 继承的样式优先级很低，可以被任何直接设置的样式覆盖
- 通配符选择器
*的优先级为 0，最低 - 优先级计算可以用 (内联, ID, 类/伪类/属性, 元素) 四元组表示，例如 (0, 1, 2, 1)
理解
可以把 CSS 优先级理解为”样式冲突的裁判规则”。
当多条 CSS 规则同时作用到一个元素时，浏览器需要知道应该听谁的。优先级规则就像一套等级制度：内联样式是最高级别，ID 选择器是高级别，类选择器是中级别，元素选择器是低级别。
如果两条规则的级别相同，那就按照”后来居上”的原则，后写的样式会覆盖先写的样式。
继承的样式优先级最低，因为它不是直接设置给这个元素的，而是从父元素那里”借来的”。
理解优先级的核心是：越具体的选择器，优先级越高。#header .nav a 比 a 更具体，所以优先级更高。
但也要注意，不要过度追求高优先级。如果发现需要频繁使用 !important 才能让样式生效，可能是选择器设计有问题，应该重新思考样式结构。
引出
理解了优先级之后，可以继续学习：
- CSS 层叠规则：深入了解 CSS 的层叠机制和样式覆盖规则
- CSS 选择器：学习更多选择器的用法，提高选择精度
- CSS 内联 内部 外部 CSS：了解不同引入方式的优先级关系
也可以学习 CSS 预处理器（例如 Sass、Less），它们提供了更灵活的样式组织方式，减少优先级冲突。