在CSS规范中，起源桶（Origin Buckets） 是指CSS规则的不同来源分类，它们在层叠算法中具有特定的优先级顺序。这些起源桶决定了当来自不同来源的规则发生冲突时，哪个规则会最终应用到元素上。
一、六个起源桶的完整列表
按照优先级从高到低排序，CSS的六个起源桶如下：
1. User Agent Important 桶
定义：浏览器默认样式中带有 !important 标记的规则。
优先级：最高（在浏览器级别的样式中）。
示例：某些浏览器的基础表单控件可能会使用 !important 确保关键样式生效。
2. User Important 桶
定义：用户自定义样式表中带有 !important 标记的规则。
优先级：第二高。
示例：用户通过浏览器扩展或系统设置添加的高优先级样式。
3. Author Important 桶
定义：网页开发者（作者）定义的样式表中带有 !important 标记的规则。
优先级：第三高。
示例：开发者在CSS文件中写的 color red !important;。
4. Author 桶
定义：网页开发者（作者）定义的普通样式规则（没有 !important 标记）。
优先级：第四高。
示例：网站的主要样式表中的常规CSS规则。
5. User 桶
定义：用户自定义样式表中的普通样式规则（没有 !important 标记）。
优先级：第五高。
示例：用户通过浏览器设置或扩展添加的常规样式。
6. User Agent 桶
定义：浏览器默认样式表中的规则（没有 !important 标记）。
优先级：最低。
示例：浏览器对
h1,p,a等元素的默认样式。
二、起源桶的优先级规则
整体顺序：优先级从高到低为：User Agent Important —> User Important —> Author Important —> Author —> User —> User Agent。
!important 的影响：带有 !important 标记的规则总是优先于没有此标记的规则，即使它们来自同一来源。
特殊点：
注意 User 桶（普通用户样式）的优先级反而低于 Author 桶（作者样式），这是为了让网站能够正常显示其设计。
但 User Important 桶高于 Author Important 桶，这是为了保护用户的可访问性需求。
实际应用示例
当多个来源的样式发生冲突时，起源桶决定了最终应用哪个规则：
<!--浏览器默认样式（User Agent 桶） -->
p { margin 1em 0; }
<!--用户自定义样式（User 桶） -->
p { margin 2em 0; }
<!--开发者样式表（Author 桶） -->
p { margin 1.5em 0; }
<!--开发者样式表中带 !important 的规则（Author Important 桶） -->
p { margin 0.5em 0 !important; }
<!--用户样式表中带 !important 的规则（User Important 桶） -->
p { margin 3em 0 !important; }在这个例子中，最终 p 元素的 margin 值将是 3em 0，因为 User Important 桶的优先级高于其他所有桶。
三、重要性和特异性的关系
起源桶与特异性（Specificity）一起决定了CSS规则的最终应用顺序：
首先比较起源桶：不同起源桶中的规则，高优先级起源桶的规则总是优先于低优先级起源桶。
同一起源桶内比较特异性：在同一起源桶中，特异性高的规则优先。
特异性相同时比较顺序：特异性相同时，后定义的规则优先。
通过理解这些起源桶的优先级规则，开发者可以更好地控制CSS样式的应用方式，避免样式冲突问题。
