登录 注册

求 CSS 代码片段

针对动态引用有以下要求：去掉下划线，去掉背景色，且不允许添加背景色（编辑中误选中动态引用添加不生效），字体颜色为特殊颜色（比如紫色），且不允许改变字体颜色（编辑中误选中动态引用改变字体颜色不生效），带中括号。

我现在使用的是 Savor 主题。11.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    22080 引用 • 88157 回帖 • 2 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    7972 引用 • 36476 回帖 • 166 关注
2 操作
CJSNYXZ 在 2024-09-22 08:53:26 更新了该帖
CJSNYXZ 在 2024-09-22 08:34:49 更新了该帖
石家庄 位置
40 悬赏
2 操作
5 回帖
2
2
117 94 1 22

相关帖子

5 回帖
求 CSS 代码片段

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • CJSNYXZ • • 1 评论
    订阅者 作者

    大佬，好像是不起作用，如果不好实现，那就退而求其次，这是我目前用的代码，可以在这个基础上，去掉背景色、字体改成像括号一样的紫色、去掉下划线。

    
:root {
    --b3-protyle-inline-blockref-color: var(--b3-theme-accent);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]::before {
    content: "[[";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]::after {
    content: "]]";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="s"]::before {
    content: "｢";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
    transform: scale(1, -1);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="s"]::after {
    content: "｣";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
    transform: scale(1, -1);
}
span[data-type~=block-ref] {
    font-weight: unset !important;
}
    1 回复
    是因为时间不够要忙别的所以我只写了个表示思路的架子啦；目
    xqh042 •
  • 其他回帖
  • wilsons • • 1 赞同
    付费者 捐赠者

    新增下面这个样式即可

    .protyle-wysiwyg [data-node-id] span[data-type~=block-ref]{
    background-color: transparent!important;
    border-bottom: none!important;
    color:rgb(137,87,229)!important;
}

    效果

    动态引用

    image.png

    静态引用

    image.png

    1 回复
  • wilsons • • 1
    付费者 捐赠者

    怎么才能去掉这些图标

    搜索，替换即可

    image.png

  • xqh042 •
    订阅者

    （编辑中误选中动态引用改变不生效）

    这似乎光靠 CSS 实现不了。
    这里抛砖引玉放上个人的大致处理思路吧

    let content = document.querySelector("div.protyle-content");

let observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    if (mutation.addedNodes.length) {
      mutation.addedNodes.forEach(function (node) {
        // 拦截新增的 <span data-type="text" style="background-color: var(--b3-font-background4);">统使用或重建时心理</span>
        // 获取其内容，如果是块选择，找div updated属性检测内联style修改的情况
        if (node.nodeName === "SPAN" && node.getAttribute("data-type") === "block-ref") {
          // 将内联style取消，
        }
      });
    }
  });
});
observer.observe(content, {
  subtree: true,
  childList: true,
  characterData: true,
  attributes: true,
});
    1 回复
  • 查看全部回帖
CJSNYXZ
石家庄
回帖
38
 帖子
12
 积分
87

近期热议

推荐标签 标签

  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    55 引用 • 307 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 746 关注
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 628 关注
  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 65 回帖 • 454 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 3 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 83 关注
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    406 引用 • 1246 回帖 • 579 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 5 关注
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 619 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 136 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 482 关注
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 152 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 98 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    221 引用 • 473 回帖
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 4 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖 • 1 关注
  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    96 引用 • 155 回帖
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 18 关注
  • 职场

    找到自己的位置，萌新烦恼少。

    127 引用 • 1705 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖

最新标签