[油猴脚本开发指南] Stylus插件 CSS 样式脚本 / 油猴CSS样式脚本

极品小猫 · 发表于 2022-4-15 11:11:33

关于样式安装

CSS样式推荐插件：Stylus
Greasyfork 发布的样式默认格式见下面的语法，Greasyfork 上安装可选安装为脚本(.user.js) 或者 Stylus 插件支持的@document样式(.user.css)。

如果安装为脚本，其实已经是 Greasyfork 将其转换为 JavaScript 代码的版本，通过插入 Style 标签应用 CSS 的代码。
因此，下面的CSS样式脚本语法，是不能直接写到 Tampermonkey 插件中去的。

CSS样式脚本语法

参见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@document

@document 规则可以指定一个或多个匹配函数。如果任何功能适用于给定的 URL，则该规则将对该URL生效。可用的函数如下：

url() ，匹配整个 URL。
url-prefix() ，匹配文档的 URL 是否以参数指定的值开头。
domain() ，匹配文档的域名是否为参数中指定的域名或者为它的子域名。
regexp() ，匹配文档的 URL 是否和参数中指定的正则表达式匹配。该表达式必须匹配整个 URL。

提供给 url()、url-prefix()，和 domain() 函数的参数可以不使用引号括起来。但提供给 regexp() 函数的参数必须用引号括起来。

提供给 regexp() 函数的正则表达式中的转义字符必须再次进行一次 CSS 转义。例如，一个点号（.），在正则表达式中匹配任意换行符之外的字母.如果想要匹配一个正真的点号，必须首先按照正则表达式的规则转义一次（变为 .）然后在使用CSS的规则再转义一次（转换为\.）。

例子

/* ==UserStyle==
@name         已读超链接标记
@namespace    https://scriptcat.org/
@homepageURL  https://bbs.tampermonkey.net.cn/
@version      1.0.0
@license      Other
@description  标记已访问过的超链接
@author       scriptcat.org
@preprocessor uso
==/UserStyle== */

@-moz-document url(https://scriptcat.org/search) {
    a[href*="/script-show-page/"]:visited {
        color: #ccc;
    }
}

@-moz-document domain("bbs.tampermonkey.net.cn") {
a[href*="/thread-"]:visited {
        color: #ccc;
    }
}