为什么我的自定义样式表在Safari中不能正常工作？

Question

今天发现 Safari 偏好设置里可以设置自定义样式表

于是我自己写了个 css 代码进行测试

body {
    background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;
}

测试结果如下（有对应的网页检查器结果）：

1. 自己写的网页，可以生效
   
2. baidu 页面，无法生效
   
   我是一个前端新手，请问下这是什么原因？

Answer 1

第一个你访问的自己项目，用的是file协议，所以可以应用到你的本地目录中的图片文件。
第二个你访问的百度，用的是http协议，但是你期望使用本地目录中的图片作为背景图片，这样是无法应用上的。

算是一个网页开发的基础就是尽量不要使用file协议来访问项目（临时应急除外），还有就是就是不要使用本地文件目录地址来作为引用地址。
因为很多时候我们会把网页部署到服务器中，这个时候你设置的 background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") 其实会被浏览器解析为 background-image: url("http://www.baidu.com/Users/luxury/Desktop/wallhaven-o5762l.png")
很明显服务器上不会有这样的一个文件，也不会有这样的文件目录。自然没办法正确载入需要的背景图。但是样式还是会被正确应用的，只不过图片资源再加载的时候会返回404。这点可以在devTools 的 network 面板中看到。

---

Edit

补充一下，因为你使用的是 user style sheet 所以我不是很确定safari单独做了处理来确保可以引入本地文件。
你可以尝试一下把 background-image: url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important; 修改为 background: #ffbebe url("/Users/luxury/Desktop/wallhaven-o5762l.png") !important;，看看是否能够应用上。

Answer 2

可以看出是被覆盖了，说明safari的用户样式表的优先级是最低的，css的任何一种优先级的选择器都可以用样式覆盖

你自己的没问题，是因为你没有在body上添加同一种样式，如果添加了样式表也就不会，因为会被覆盖