登录 注册

求一个引用样式的 CSS 代码片段

本贴最后更新于 500 天前，其中的信息可能已经渤澥桑田

求一个类似下图样式的「引用」CSS 代码片段：

文字颜色：#4285F4；背景颜色：#DDE7F7。背景四个角有些小圆角，如下图。

image.png

  • 思源笔记

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

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

    25876 引用 • 107178 回帖
  • Q&A

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

    9932 引用 • 45107 回帖 • 77 关注
北京 位置
100 悬赏
1 收藏
6 回帖
4
2
532 141 11 285 11 2 80

相关帖子

被采纳的回答
  • JeffreyChen • • 1 • 1 赞同
    付费者 支持者 捐赠者

    然后这个是加了一点左右边距，可能会好看一点：

    /* 引用文本样式 CSS片段 */
/* 动态锚文本 */
span[data-type="block-ref"][data-subtype="d"] {
  color: #4285F4; /* 字体颜色 */
  background-color: #DDE7F7; /* 背景颜色 */
  border-radius: 4px; /* 圆角 */
  padding: 0 3px; /* 左右边距 */
}
/* 静态锚文本 */
span[data-type="block-ref"][data-subtype="s"] {
  color: #4285F4;
  background-color: #DDE7F7;
  border-radius: 4px;
  padding: 0 3px;
}
​
6 回帖
求一个引用样式的 CSS 代码片段

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • sweesalt •
    订阅者 作者

    谢谢

  • 其他回帖
  • JeffreyChen •
    付费者 支持者 捐赠者

    如果用的不是默认主题，就用这个强制生效：

    /* 自定义引用文本样式 CSS片段 */
/* 动态锚文本 */
span[data-type="block-ref"][data-subtype="d"] {
  color: #4285F4 !important; /* 字体颜色 */
  background-color: #DDE7F7 !important; /* 背景颜色 */
  border-radius: 4px !important; /* 圆角 */
  padding: 0 3px !important; /* 左右边距 */
}
/* 静态锚文本 */
span[data-type="block-ref"][data-subtype="s"] {
  color: #4285F4 !important;
  background-color: #DDE7F7 !important;
  border-radius: 4px !important;
  padding: 0 3px !important;
}
​
  • JeffreyChen • • 1 • 1 赞同
    付费者 支持者 捐赠者

    然后这个是加了一点左右边距，可能会好看一点：

    /* 引用文本样式 CSS片段 */
/* 动态锚文本 */
span[data-type="block-ref"][data-subtype="d"] {
  color: #4285F4; /* 字体颜色 */
  background-color: #DDE7F7; /* 背景颜色 */
  border-radius: 4px; /* 圆角 */
  padding: 0 3px; /* 左右边距 */
}
/* 静态锚文本 */
span[data-type="block-ref"][data-subtype="s"] {
  color: #4285F4;
  background-color: #DDE7F7;
  border-radius: 4px;
  padding: 0 3px;
}
​
    1 回复
    1 操作
    JeffreyChen 在 2024-01-26 19:40:50 更新了该回帖
  • JeffreyChen •
    付费者 支持者 捐赠者

    这个只对引用生效而不对超链接生效，试试？

    span[data-type="block-ref"][data-subtype="d"] {
  color: #4285F4;
  background-color: #DDE7F7;
  border-radius: 2px;
}
span[data-type="block-ref"][data-subtype="s"] {
  color: #4285F4;
  background-color: #DDE7F7;
  border-radius: 2px;
}
​
  • 查看全部回帖
sweesalt
北京
回帖
277
 帖子
69
 积分
8969

近期热议

推荐标签 标签

  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 554 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖 • 2 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 3 关注
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 489 关注
  • 深度学习

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

    43 引用 • 44 回帖
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 25 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4601 回帖 • 712 关注
  • OneDrive
    2 引用 • 2 关注
  • Outlook
    1 引用 • 5 回帖 • 5 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    588 引用 • 3528 回帖
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 7 关注
  • Word
    13 引用 • 41 回帖
  • abitmean

    有点意思就行了

    • 31 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 17 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 200 关注
  • Oracle

    Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 342 关注
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 403 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖
  • 安全

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

    199 引用 • 818 回帖 • 2 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 5 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    326 引用 • 1395 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 751 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。

    1 引用 • 222 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 561 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    371 引用 • 1856 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 834 关注

最新标签