请问有办法让数据库表格不被编辑区背景色覆盖吗?

想要让打字的环境更舒适一点,前几天找 AI 要了一段代码,修改编辑区的背景颜色,但是我发现他覆盖了普通表格的配色,于是,我又让 AI 修改了代码,让表格有自己的配色。

但是我发现数据库表格的配色也被覆盖了,而 AI 这次修改不了了,所以我来论坛问一下有 css 代码可以阻止编辑区的背景色覆盖它吗?或者有什么代码可以使他有自己的配色?

还有这是我用的 css 代码。感兴趣的看看。编辑区背景色修改.7z

20250127094514.png

  • 思源笔记

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

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

    24250 引用 • 98931 回帖
  • Q&A

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

    9102 引用 • 41383 回帖 • 125 关注

相关帖子

被采纳的回答
  • 帮你改了一下:

    /* 修改编辑区到题头图区域的背景颜色 */ .protyle { --b3-theme-background: #EEE6DD !important; /* 统一浅米色背景 */ --b3-parent-background: var(--b3-theme-background) !important; /* 数据库背景 */ } /* 编辑区文本颜色 */ .protyle-wysiwyg { color: #575279 !important; /* 深蓝紫色文本 */ } /* 标题区域背景颜色 */ .protyle-title { /*background: transparent !important; /* 透明背景,与背景保持一致 */ color: #575279 !important; /* 深蓝紫色文本 */ } /* 面包屑区域背景颜色(与编辑器一致) */ .protyle .protyle-breadcrumb { background: #EEE6DD !important; /* 统一浅米色背景 */ } /* 表格默认样式 */ table { background-color: #FFFFFF !important; /* 表格白色背景 */ border-collapse: collapse; /* 合并边框间隙 */ width: 100%; /* 表格宽度自适应 */ } /* 表格标题行样式 */ table thead tr { background-color: #F5F3FA !important; /* 标题行淡紫背景 */ color: #575279 !important; /* 深蓝紫色文本 */ font-weight: bold; text-align: left; /* 标题左对齐 */ } /* 表格单元格样式 */ table th, table td { border: 1px solid #E0E0E0 !important; /* 浅灰色边框 */ padding: 8px; /* 单元格内边距 */ color: #575279 !important; /* 深蓝紫色文本 */ } /* 表格内容行的交替背景色 */ table tbody tr:nth-child(even) { background-color: #F9F9F9; /* 偶数行浅灰背景 */ } table tbody tr:nth-child(odd) { background-color: #FFFFFF; /* 奇数行白色背景 */ } /* 选中状态背景颜色 */ .protyle-wysiwyg ::selection { background-color: #CC66FF !important; /* 浅紫色选中背景 */ color: #333333 !important; /* 深色选中文本 */ }

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • EmptyLight 1 2 评论

    可以通过CTRL+Shift+I打开控制台,之后选择控制台左上角的检查元素(CTRL+Shift+C),选中数据库里面的背景,之后在右方的样式面板中查看需要修改部分的样式选择器,可以参考表格的写法用数据库的选择器设置背景颜色。

    翻看了我之前主题写的代码,可供参考(注意这里用到的颜色可能已被修改,需要替换,并且是好几个版本之前写的,需要注意检查可用性):

    .protyle .av[data-av-type=table] .av__header, .protyle .av[data-av-type=table] .av__scroll { /* 数据库背景修复 */ background: var(--b3-theme-background); }

    https://github.com/emptylight370/siyuan-vscodelite-edit/blob/70a032b13c48dd0cacdebde2f47e0ceab295cef6/src/plugin/backgroundPlugin.scss#L72-L76

    这个方法有问题的,如果父块有背景色的话颜色会不一致。应该改 --b3-parent-background
    JeffreyChen
    @JeffreyChen 能正常显示就行了,我当时没在意这个
    EmptyLight
  • 帮你改了一下:

    /* 修改编辑区到题头图区域的背景颜色 */ .protyle { --b3-theme-background: #EEE6DD !important; /* 统一浅米色背景 */ --b3-parent-background: var(--b3-theme-background) !important; /* 数据库背景 */ } /* 编辑区文本颜色 */ .protyle-wysiwyg { color: #575279 !important; /* 深蓝紫色文本 */ } /* 标题区域背景颜色 */ .protyle-title { /*background: transparent !important; /* 透明背景,与背景保持一致 */ color: #575279 !important; /* 深蓝紫色文本 */ } /* 面包屑区域背景颜色(与编辑器一致) */ .protyle .protyle-breadcrumb { background: #EEE6DD !important; /* 统一浅米色背景 */ } /* 表格默认样式 */ table { background-color: #FFFFFF !important; /* 表格白色背景 */ border-collapse: collapse; /* 合并边框间隙 */ width: 100%; /* 表格宽度自适应 */ } /* 表格标题行样式 */ table thead tr { background-color: #F5F3FA !important; /* 标题行淡紫背景 */ color: #575279 !important; /* 深蓝紫色文本 */ font-weight: bold; text-align: left; /* 标题左对齐 */ } /* 表格单元格样式 */ table th, table td { border: 1px solid #E0E0E0 !important; /* 浅灰色边框 */ padding: 8px; /* 单元格内边距 */ color: #575279 !important; /* 深蓝紫色文本 */ } /* 表格内容行的交替背景色 */ table tbody tr:nth-child(even) { background-color: #F9F9F9; /* 偶数行浅灰背景 */ } table tbody tr:nth-child(odd) { background-color: #FFFFFF; /* 奇数行白色背景 */ } /* 选中状态背景颜色 */ .protyle-wysiwyg ::selection { background-color: #CC66FF !important; /* 浅紫色选中背景 */ color: #333333 !important; /* 深色选中文本 */ }

推荐标签 标签

  • 尊园地产

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

    1 引用 • 22 回帖 • 781 关注
  • Flume

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

    9 引用 • 6 回帖 • 651 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 5 关注
  • VirtualBox

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

    10 引用 • 2 回帖 • 14 关注
  • HTML

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

    107 引用 • 295 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 4 关注
  • 脑图

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

    31 引用 • 96 回帖
  • Oracle

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

    107 引用 • 127 回帖 • 365 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 148 关注
  • 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.

    6 引用 • 63 回帖 • 4 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 659 关注
  • 设计模式

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

    200 引用 • 120 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 564 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    132 引用 • 796 回帖 • 1 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 73 关注
  • abitmean

    有点意思就行了

    31 关注
  • 安全

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

    204 引用 • 816 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 287 关注
  • Vditor

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

    359 引用 • 1832 回帖 • 1 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 23 关注
  • JVM

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

    180 引用 • 120 回帖 • 4 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    93 引用 • 901 回帖
  • Q&A

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

    9102 引用 • 41383 回帖 • 125 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 408 关注