为何Stylish用户CSS会覆盖作者CSS？

先给大家还原一下遇到的场景：
页面的作者代码是这样的：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body { background: black; } 
</style> 
</head> 
<body> 
</body> 
</html>

用户通过Stylus或Stylish这类浏览器插件添加了自己的CSS：

body { background: white; }

按照常规理解，作者样式的优先级应该高于用户样式，页面本该显示黑色，但实际却是白色。这背后的原因其实和「用户样式的定义差异」有关：

• 标准意义上的浏览器原生用户样式表（比如用户在浏览器设置里自定义的样式），优先级确实低于作者样式（除非加了!important）。
• 但Stylus、Stylish这类插件注入的CSS，本质是以「作者身份」追加到页面的样式——它们会在页面自带的作者样式加载完成后，动态把用户的CSS插入到页面的样式体系中，属于页面样式的一部分。

这时候两个样式的选择器权重完全一致（都是body选择器，权重为0-0-1），又没有!important声明，那么根据CSS层叠的**「源顺序规则」**：后加载的样式会覆盖先加载的样式。插件的CSS晚于作者的<style>加载，所以白色背景就覆盖了黑色背景。

简单总结：插件的用户CSS不是浏览器标准的「用户样式」，而是晚于作者样式加载的「类作者样式」，靠加载顺序的优先级赢了。

内容的提问来源于stack exchange，提问作者Karashevich B.