上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情

    2024-8-14 16:46
  • 签到天数: 69 天

    [LV.6]常住居民II

    6

    主题

    127

    回帖

    222

    积分

    高级工程师

    积分
    222

    油中2周年生态建设者

    发表于 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;
        }
    }
    已有1人评分好评 油猫币 贡献 理由
    王一之 + 1 + 4 + 1 ggnb!

    查看全部评分 总评分:好评 +1  油猫币 +4  贡献 +1 

  • TA的每日心情
    开心
    2024-11-21 13:37
  • 签到天数: 213 天

    [LV.7]常住居民III

    306

    主题

    4256

    回帖

    4105

    积分

    管理员

    积分
    4105

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-4-15 11:15:30 | 显示全部楼层
    还没了解过这个,没用过,感觉GM_addStyle也能实现,不过各有所长吧,这样去定义style确实更方便

    哥哥文章排版我帮哥哥优化了
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
    回复

    使用道具 举报

  • TA的每日心情

    2024-8-14 16:46
  • 签到天数: 69 天

    [LV.6]常住居民II

    6

    主题

    127

    回帖

    222

    积分

    高级工程师

    积分
    222

    油中2周年生态建设者

    发表于 2022-4-15 11:23:08 | 显示全部楼层
    王一之 发表于 2022-4-15 11:15
    还没了解过这个,没用过,感觉GM_addStyle也能实现,不过各有所长吧,这样去定义style确实更方便

    哥哥文章 ...

    GM_addStyle 是很方便,但是现在六十多个脚本,头皮发麻,我已经适尽力把自己的脚本能写到一个里就写到一个里

    插入CSS,还是找术有专攻的
    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    4 天前
  • 签到天数: 194 天

    [LV.7]常住居民III

    720

    主题

    6071

    回帖

    6850

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6850

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2022-4-15 14:35:00 | 显示全部楼层
    极品小猫 发表于 2022-4-15 11:23
    GM_addStyle 是很方便,但是现在六十多个脚本,头皮发麻,我已经适尽力把自己的脚本能写到一个里就写到一 ...

    维护六十多个脚本真的牛逼..
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情

    2024-8-14 16:46
  • 签到天数: 69 天

    [LV.6]常住居民II

    6

    主题

    127

    回帖

    222

    积分

    高级工程师

    积分
    222

    油中2周年生态建设者

    发表于 2022-4-15 15:42:35 | 显示全部楼层
    李恒道 发表于 2022-4-15 14:35
    维护六十多个脚本真的牛逼..

    谁没点自用脚本
    发布的也没几个,伺候不起伸手党
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表