登录 注册

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

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

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

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

image.png

  • 思源笔记

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

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

    26054 引用 • 108154 回帖
  • Q&A

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

    10007 引用 • 45485 回帖 • 72 关注
北京 位置
100 悬赏
1 收藏
6 回帖
4
2
555 141 15 292 11 2 92

相关帖子

被采纳的回答
  • 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 代码片段

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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;
}
​
  • 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 •
    付费者 支持者 捐赠者

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

    /* 自定义引用文本样式 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;
}
​
  • sweesalt •
    订阅者 作者

    引用使用「加粗」，引用格式就消失了，能完善一下代码吗？我看 savor 主题是可以加粗的~

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    OK 了，尽量整句一起加粗，如果只加粗其中的一部分的话就会是这样的效果，因为它会被自动分为多个引用：

    image.png

    /* 引用文本样式 CSS片段 */
span[data-type^="block-ref"] {
  color: #4285F4; /* 字体颜色 */
  background-color: #DDE7F7; /* 背景颜色 */
  border-radius: 4px; /* 圆角 */
  padding: 0 3px; /* 左右边距 */
}
​
    1 回复
    2 操作
    JeffreyChen 在 2024-01-27 18:46:47 更新了该回帖
    JeffreyChen 在 2024-01-27 18:44:21 更新了该回帖
  • sweesalt •
    订阅者 作者

    谢谢

请输入回帖内容 ...
sweesalt
北京
回帖
282
 帖子
70
 积分
9486

近期热议

推荐标签 标签

  • Shell

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

    125 引用 • 74 回帖
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 406 关注
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    12 引用 • 5 回帖 • 635 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    118 引用 • 54 回帖 • 1 关注
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 561 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 537 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 1 关注
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 280 关注
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 439 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 678 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 515 关注
  • CodeMirror
    2 引用 • 17 回帖 • 167 关注
  • OpenShift

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

    14 引用 • 20 回帖 • 664 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 450 关注
  • 印象笔记
    3 引用 • 16 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 242 回帖
  • 小薇

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

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

    35 引用 • 468 回帖 • 762 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 37 关注
  • jsoup

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

    6 引用 • 1 回帖 • 491 关注
  • Oracle

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

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

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

    93 引用 • 122 回帖 • 619 关注
  • 导航

    各种网址链接、内容导航。

    45 引用 • 177 回帖 • 2 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 671 关注
  • 持续集成

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

    15 引用 • 7 回帖 • 1 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    98 引用 • 367 回帖
  • Anytype
    3 引用 • 31 回帖 • 27 关注

最新标签