总需求：
有点复杂，以有序列表为例：
1. 折叠时，去除数字方框阴影
另：无序列表的折叠阴影不用去除
2. 只显示“‣”
3. 鼠标悬浮“‣”时，去除方框阴影、“折叠/展开”字样
4. 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”）
本贴最后更新于 432 天前，其中的信息可能已经时过境迁
相关帖子
被采纳的回答
-
wilsons • • 1付费者 捐赠者
css 代码如下
/* 有序列表，折叠时，去除数字方框阴影; 无序列表的折叠阴影不用去除 */ .protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{ background-color: transparent!important; } /* 只显示“‣” */ .protyle-gutters button[data-type="NodeList"] svg, .protyle-gutters button[data-type="NodeListItem"] svg { display:none; } /* 鼠标悬浮“‣”时去除方框引用 */ .protyle-gutters button:hover svg{ background-color: transparent; } /* 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”） */ .protyle-wysiwyg div[fold="1"]:not(div[data-type="NodeListItem"]){ background-color: transparent; border:none; } /* 鼠标悬浮“‣”时，去除“折叠/展开”字样，css无法实现，见下面的js代码 */鼠标悬浮“‣”时，去除“折叠/展开”字样，css 无法实现，js 代码如下
// 鼠标悬浮“‣”时，去除“折叠/展开”字样 (()=>{ whenElementExist(".layout__center").then((element)=>{ element.addEventListener('mouseover', async (e)=>{ if(e.target.closest('button[aria-label="折叠/展开"]')){ const tooltip = await whenElementExist("#tooltip"); tooltip.remove(); } }); }); function whenElementExist(selector) { return new Promise(resolve => { const checkForElement = () => { let element = null; if (typeof selector === 'function') { element = selector(); } else { element = document.querySelector(selector); } if (element) { resolve(element); } else { requestAnimationFrame(checkForElement); } }; checkForElement(); }); } })();另外，你需求里提到的一级标题，我想你本意应该不是仅针对一级标题的样式吧，所以这里的样式和 js 会应用到 h1-h6 所有标题。
请输入回帖内容
...
-
- 其他回帖
-
大佬，还有点小问题：
1.我想只在折叠状态下隐藏“‣”后面的标识（上面的代码在非折叠的状态下也把后面的标识隐藏了）
2.折叠状态下，需要常驻显示“‣”（上面的代码只有鼠标悬浮时才显示“‣”，没法辨别折叠状态）
PS：其实需求就是把列表折叠样式（即方框阴影）改为箭头“‣”
3.标题样式
之前表述没完全，标题折叠也只需显示“‣”
另：折叠状态下，上面的片段似乎会覆盖以下片段，大佬看看能解决不：
/* 设置统一的样式 */ .protyle-wysiwyg [data-node-id][data-type="NodeHeading"]::before { position: absolute; top: -0.8em; color: #55555a4d; } .protyle-wysiwyg [data-node-id].h1::before { content: "."; } .protyle-wysiwyg [data-node-id].h2::before { content: ".."; } .protyle-wysiwyg [data-node-id].h3::before { content: "..."; } .protyle-wysiwyg [data-node-id].h4::before { content: "...."; } .protyle-wysiwyg [data-node-id].h5::before { content: "....."; } .protyle-wysiwyg [data-node-id].h6::before { content: "......"; }1 回复 -
抱歉，之前的回复有问题，并不是因为省略号超出折叠元素范围导致的，而是因为折叠时标题前面的圆形图标和省略号是选择符是同一个元素，且圆形图标的优先级更高，覆盖了省略号导致的。
所以，我现在在折叠模式下，用标题后面的文字元素再添加个样式来模拟标题元素的省略号，这样就弥补了折叠时标题省略号丢失问题。
代码如下，添加到思源 css 代码片段中即可。
.protyle-wysiwyg [data-node-id][data-type="NodeHeading"][fold="1"] > [contenteditable="true"]::before { position: absolute; top: -0.8em; color: #55555a4d; } .protyle-wysiwyg [data-node-id][fold="1"].h1 > [contenteditable="true"]::before { content: "."; } .protyle-wysiwyg [data-node-id][fold="1"].h2 > [contenteditable="true"]::before { content: ".."; } .protyle-wysiwyg [data-node-id][fold="1"].h3 > [contenteditable="true"]::before { content: "..."; } .protyle-wysiwyg [data-node-id][fold="1"].h4 > [contenteditable="true"]::before { content: "...."; } .protyle-wysiwyg [data-node-id][fold="1"].h5 > [contenteditable="true"]::before { content: "....."; } .protyle-wysiwyg [data-node-id][fold="1"].h6 > [contenteditable="true"]::before { content: "......"; }感恩！ - 查看全部回帖
