登录 注册

求完善标题块代码片段

本贴最后更新于 243 天前，其中的信息可能已经沧海桑田

写了一个标题标识的代码片段，但有两个问题：① 标题文字增加行内格式时，会重复出现标识图形（以上标形式）；② 标题行右上角重复显示标识。烦请哪位大佬帮助修改一下。

image.png

代码如下：

.protyle-wysiwyg [data-node-id].h1 ::after{
  content:"  1️⃣";
  font-size:0.7em;
  opacity: 0.4;
}
.protyle-wysiwyg [data-node-id].h2 ::after{
  content:"  2️⃣";
  font-size:0.7em;
  opacity: 0.4;
}
.protyle-wysiwyg [data-node-id].h3 ::after{
  content:"  3️⃣";
  font-size:0.8em;
  font-size:0.7em;
  opacity: 0.4;
}
.protyle-wysiwyg [data-node-id].h4 ::after{
 content:"  4️⃣";
  font-size:0.8em;
  font-size:0.7em;
  opacity: 0.4;
}
.protyle-wysiwyg [data-node-id].h5 ::after{
 content:"  5️⃣";
  font-size:0.8em;
  font-size:0.7em;
  opacity: 0.4;
}
.protyle-wysiwyg [data-node-id].h6 ::after{
  content:"  6️⃣";
  font-size:0.8em;
  font-size:0.7em;
  opacity: 0.4;
}
  • 思源笔记

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

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

    22188 引用 • 88668 回帖 • 7 关注
  • Q&A

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

    8035 引用 • 36734 回帖 • 164 关注
北京 位置
50 悬赏
2 收藏
1 赞同
9 回帖
5
3
409 116 3 274 1 14 1

相关帖子

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

    改好了：

    div[data-subtype^="h1"]:not([type])>div:first-child:after{
    content:"  1️⃣";
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h2"]>div:first-child:after{
    content:"  2️⃣";
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h3"]>div:first-child:after{
    content:"  3️⃣";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h4"]>div:first-child:after{
    content:"  4️⃣";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h5"]>div:first-child:after{
    content:"  5️⃣";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h6"]>div:first-child:after{
    content:"  6️⃣";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}
9 回帖
求完善标题块代码片段

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • JeffreyChen •
    付费者 支持者 捐赠者

    改好了：

    div[data-subtype^="h1"]:not([type])>div:first-child:after{
    content:"  1️⃣";
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h2"]>div:first-child:after{
    content:"  2️⃣";
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h3"]>div:first-child:after{
    content:"  3️⃣";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h4"]>div:first-child:after{
    content:"  4️⃣";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h5"]>div:first-child:after{
    content:"  5️⃣";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h6"]>div:first-child:after{
    content:"  6️⃣";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}
    2 回复
    1 操作
    JeffreyChen 在 2024-03-16 12:24:43 更新了该回帖
  • sweesalt •
    订阅者 作者

    谢谢哈，帮了我很多忙

  • sweesalt •
    订阅者 作者

    image.png

  • JeffreyChen • • 1 评论
    付费者 支持者 捐赠者

    @Vanessa 导出 PDF 的时候，文档标题好像是会转换成一级标题。有办法改进这个 CSS 片段吗？

    试试 :not([type])
    Vanessa •
  • JeffreyChen •
    付费者 支持者 捐赠者

    @Vanessa 不行，我的 CSS 片段样式还是会应用在导出 PDF 的文档标题

    image.png

    1 回复
  • Vanessa •
    订阅者 付费者 MOD

    image.png

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

    我不理解，我导出用户指南的这个文档确实也没有，但导出其他文档就有了

    image.png

    image.png

    DocTreehideicon.sy.zip

    @88250 看一下这个文档怎么没有 type 属性
    Vanessa •
    @Vanessa 下个版本解决。
    88250 •
  • JeffreyChen •
    付费者 支持者 捐赠者

    @intelion 原回帖的 CSS 代码更新了，你重新复制一下。代码片段可能要等到下个版本才能生效（下个版本可能就修复了），到时候你更新了试试再来反馈。

    20240411 确认修复了

    1 回复
    1 操作
    JeffreyChen 在 2024-04-11 23:47:53 更新了该回帖
  • sweesalt •
    订阅者 作者

    OK，谢谢

请输入回帖内容 ...
sweesalt
北京
回帖
224
 帖子
56
 积分
2066

近期热议

推荐标签 标签

  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖 • 2 关注
  • OnlyOffice
    4 引用
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 386 关注
  • BND

    BND（Baidu Netdisk Downloader）是一款图形界面的百度网盘不限速下载器，支持 Windows、Linux 和 Mac，详细介绍请看这里。

    107 引用 • 1281 回帖 • 26 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 242 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 758 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 536 关注
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    26 引用 • 84 回帖 • 1 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    167 引用 • 1509 回帖 • 1 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 1 关注
  • 倾城之链
    23 引用 • 66 回帖 • 137 关注
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 126 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    729 引用 • 1327 回帖
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”，乌云众测平台认证的“安全云”，为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 545 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 6 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    169 引用 • 506 回帖
  • Flume

    Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 623 关注
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 2 关注
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 352 关注
  • H2

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

    11 引用 • 54 回帖 • 654 关注
  • 互联网

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

    98 引用 • 344 回帖
  • DNSPod

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

    6 引用 • 26 回帖 • 509 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • Facebook

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

    4 引用 • 15 回帖 • 453 关注
  • 深度学习

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

    53 引用 • 40 回帖

最新标签