登录 注册

[css] 改了个 H1-H6 标题颜色，但是还是有奇奇怪怪毛病 

:root {
    --custom-color-my-black: #0C0C0C;
    --custom-color-my-blue: #2E75B5;
    --custom-color-my-orange: #ED7D31;
    --custom-color-my-red: #FA0000;
    --custom-color-my-red-1: #E84C22;
    --custom-color-my-yellow: #BF9000;
    --custom-color-my-green: #70AD47;
    --custom-color-my-purple: #8064A2;
    --custom-color-my-blue-2: #66CCFF;
}


:root[data-theme-mode=light] {
    --custom-h1-color-final: var(--custom-color-my-red-1);
    --custom-h2-color-final: var(--custom-color-my-yellow);
    --custom-h3-color-final: var(--custom-color-my-green);
    --custom-h4-color-final: var(--custom-color-my-blue);
    --custom-h5-color-final: var(--custom-color-my-purple);
    --custom-h6-color-final: var(--custom-color-my-black);
}

:root[data-theme-mode=dark] {
    --custom-h1-color-final: var(--b3-card-error-color);
    --custom-h2-color-final: var(--b3-card-warning-color);
    --custom-h3-color-final: var(--b3-card-success-color);
    --custom-h4-color-final: var(--b3-card-info-color);
    --custom-h5-color-final: #B2A1C7;
    --custom-h6-color-final: var(--b3-theme-on-background);
}

.protyle-wysiwyg [data-node-id].h1 {
    color: var(--custom-h1-color-final) !important;
    position: relative !important;
    overflow: visible !important; /* 确保::after可见 */
}
.protyle-wysiwyg [data-node-id].h2 {
    color: var(--custom-h2-color-final) !important;
    position: relative !important;
    overflow: visible !important;
}
.protyle-wysiwyg [data-node-id].h3 {
    color: var(--custom-h3-color-final) !important;
    position: relative !important;
    overflow: visible !important;
}
.protyle-wysiwyg [data-node-id].h4 {
    color: var(--custom-h4-color-final) !important;
}
.protyle-wysiwyg [data-node-id].h5 {
    color: var(--custom-h5-color-final) !important;
}
.protyle-wysiwyg [data-node-id].h6 {
    color: var(--custom-h6-color-final) !important;
}

.protyle-title[data-node-id] { 
    color: var(--custom-h1-color-final) !important;
    position: relative !important;
    overflow: visible !important;
}
.protyle-title[data-node-id]::after { /
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -0.2em !important;
    width: 100% !important;
    height: 1px !important;
}
:root[data-theme-mode="light"] .protyle-title[data-node-id]::after {
     background: linear-gradient(to right, transparent, var(--custom-h1-color-final) 20%, var(--custom-h1-color-final) 80%, transparent) !important;
}
:root[data-theme-mode="dark"] .protyle-title[data-node-id]::after {
     background: linear-gradient(to right, transparent, var(--custom-h1-color-final) 20%, var(--custom-h1-color-final) 80%, transparent) !important;
}
*/


.protyle-wysiwyg [data-node-id].h1::after,
.protyle-wysiwyg [data-node-id].h2::after,
.protyle-wysiwyg [data-node-id].h3::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -0.2em !important;
    width: 100% !important;
    height: 1px !important;
    /* 背景将在下面根据主题设置 */
}

:root[data-theme-mode="light"] .protyle-wysiwyg [data-node-id].h1::after {
    background: linear-gradient(to right, transparent, var(--custom-h1-color-final) 20%, var(--custom-h1-color-final) 80%, transparent) !important;
}
:root[data-theme-mode="light"] .protyle-wysiwyg [data-node-id].h2::after {
    background: linear-gradient(to right, transparent, var(--custom-h2-color-final) 20%, var(--custom-h2-color-final) 80%, transparent) !important;
}
:root[data-theme-mode="light"] .protyle-wysiwyg [data-node-id].h3::after {
    background: linear-gradient(to right, transparent, var(--custom-h3-color-final) 20%, var(--custom-h3-color-final) 80%, transparent) !important;
}

:root[data-theme-mode="dark"] .protyle-wysiwyg [data-node-id].h1::after {
    background: linear-gradient(to right, transparent, var(--custom-h1-color-final) 20%, var(--custom-h1-color-final) 80%, transparent) !important;
}
:root[data-theme-mode="dark"] .protyle-wysiwyg [data-node-id].h2::after {
    background: linear-gradient(to right, transparent, var(--custom-h2-color-final) 20%, var(--custom-h2-color-final) 80%, transparent) !important;
}
:root[data-theme-mode="dark"] .protyle-wysiwyg [data-node-id].h3::after {
    background: linear-gradient(to right, transparent, var(--custom-h3-color-final) 20%, var(--custom-h3-color-final) 80%, transparent) !important;
}

差不多是这样，但是大标题被选中的时候还是有点奇怪。横线跑上面去而且背景的高亮没了。

image.png

image.png

  • 思源笔记

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

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

    25512 引用 • 105497 回帖
  • 代码片段

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

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

    171 引用 • 1153 回帖
杭州 位置
5 回帖
3
2
141 92 8 1 40

相关帖子

5 回帖
[css] 改了个 H1-H6 标题颜色，但是还是有奇奇怪怪毛病

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Mayrain •
    作者

    目前的猜测是选中的会多一个类所以要额外抓元素，但是不知道名字叫什么

  • Mayrain •
    作者

    自己顶一顶，试了半天没能解决。

  • queguaiya •
    付费者

    感觉代码很冗余啊，而且不知道你要实现什么效果

  • queguaiya • • 1
    付费者

    按照我的猜测帮你改好了，不知道是不是你要的效果

    :root {
    --custom-color-my-black: #0C0C0C;
    --custom-color-my-blue: #2E75B5;
    --custom-color-my-orange: #ED7D31;
    --custom-color-my-red: #FA0000;
    --custom-color-my-red-1: #E84C22;
    --custom-color-my-yellow: #BF9000;
    --custom-color-my-green: #70AD47;
    --custom-color-my-purple: #8064A2;
    --custom-color-my-blue-2: #66CCFF;
}
:root[data-theme-mode=light] {
    --custom-h1-color-final: var(--custom-color-my-red-1);
    --custom-h2-color-final: var(--custom-color-my-yellow);
    --custom-h3-color-final: var(--custom-color-my-green);
    --custom-h4-color-final: var(--custom-color-my-blue);
    --custom-h5-color-final: var(--custom-color-my-purple);
    --custom-h6-color-final: var(--custom-color-my-black);
}
:root[data-theme-mode=dark] {
    --custom-h1-color-final: var(--b3-card-error-color);
    --custom-h2-color-final: var(--b3-card-warning-color);
    --custom-h3-color-final: var(--b3-card-success-color);
    --custom-h4-color-final: var(--b3-card-info-color);
    --custom-h5-color-final: #B2A1C7;
    --custom-h6-color-final: var(--b3-theme-on-background);
}

.protyle-wysiwyg [data-node-id].h1 {
    color: var(--custom-h1-color-final);
}
.protyle-wysiwyg [data-node-id].h2 {
    color: var(--custom-h2-color-final);
}
.protyle-wysiwyg [data-node-id].h3 {
    color: var(--custom-h3-color-final);
}
.protyle-wysiwyg [data-node-id].h4 {
    color: var(--custom-h4-color-final);
}
.protyle-wysiwyg [data-node-id].h5 {
    color: var(--custom-h5-color-final);
}
.protyle-wysiwyg [data-node-id].h6 {
    color: var(--custom-h6-color-final);
}
.protyle-title .protyle-title__input { 
    color: var(--custom-h1-color-final);
}
.protyle-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.2em;
    width: 100%;
    height: 1px;
}
:root[data-theme-mode="light"] .protyle-title[data-node-id]::after {
    background: linear-gradient(to right, transparent, var(--custom-h1-color-final) 20%, var(--custom-h1-color-final) 80%, transparent);
}
:root[data-theme-mode="dark"] .protyle-title[data-node-id]::after {
    background: linear-gradient(to right, transparent, var(--custom-h1-color-final) 20%, var(--custom-h1-color-final) 80%, transparent);
}
.protyle-wysiwyg [data-node-id].h1,
.protyle-wysiwyg [data-node-id].h2,
.protyle-wysiwyg [data-node-id].h3 {
    & > [contenteditable]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -0.2em;
        width: 100%;
        height: 1px;
    }
}
:root[data-theme-mode="light"] .protyle-wysiwyg [data-node-id].h1 > [contenteditable]::after {
    background: linear-gradient(to right, transparent, var(--custom-h1-color-final) 20%, var(--custom-h1-color-final) 80%, transparent);
}
:root[data-theme-mode="light"] .protyle-wysiwyg [data-node-id].h2 > [contenteditable]::after {
    background: linear-gradient(to right, transparent, var(--custom-h2-color-final) 20%, var(--custom-h2-color-final) 80%, transparent);
}
:root[data-theme-mode="light"] .protyle-wysiwyg [data-node-id].h3 > [contenteditable]::after {
    background: linear-gradient(to right, transparent, var(--custom-h3-color-final) 20%, var(--custom-h3-color-final) 80%, transparent);
}
:root[data-theme-mode="dark"] .protyle-wysiwyg [data-node-id].h1 > [contenteditable]::after {
    background: linear-gradient(to right, transparent, var(--custom-h1-color-final) 20%, var(--custom-h1-color-final) 80%, transparent);
}
:root[data-theme-mode="dark"] .protyle-wysiwyg [data-node-id].h2 > [contenteditable]::after {
    background: linear-gradient(to right, transparent, var(--custom-h2-color-final) 20%, var(--custom-h2-color-final) 80%, transparent);
}
:root[data-theme-mode="dark"] .protyle-wysiwyg [data-node-id].h3 > [contenteditable]::after {
    background: linear-gradient(to right, transparent, var(--custom-h3-color-final) 20%, var(--custom-h3-color-final) 80%, transparent);
}
    1 回复
  • Mayrain •
    作者

    是的！就是这个效果！感谢！主要是我希望 H1-H3 有下横线，但是选中 H1-H3 块，那个横线就会往上飘。你这个已经解决问题了，感恩！

Mayrain
杭州
回帖
167
 帖子
32
 积分
571

近期热议

推荐标签 标签

  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 3 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 2 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖 • 1 关注
  • Elasticsearch

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

    117 引用 • 99 回帖 • 200 关注
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖
  • PHP

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

    182 引用 • 408 回帖 • 488 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 251 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    78 引用 • 396 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    168 引用 • 597 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    184 引用 • 1020 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 728 关注
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司，该公司位于捷克的布拉格，并在俄国的圣彼得堡及美国麻州波士顿都设有办公室，该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境：IntelliJ IDEA。

    18 引用 • 54 回帖 • 2 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 636 关注
  • Vim

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

    29 引用 • 66 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 1 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    174 引用 • 3853 回帖
  • SQLServer

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

    21 引用 • 31 回帖 • 2 关注
  • OneNote
    1 引用 • 3 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 249 关注
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1441 引用 • 10069 回帖 • 496 关注
  • Kafka

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

    36 引用 • 35 回帖 • 2 关注
  • abitmean

    有点意思就行了

    • 33 关注

最新标签