总需求：
有点复杂，以有序列表为例：
1. 折叠时，去除数字方框阴影
另：无序列表的折叠阴影不用去除
2. 只显示“‣”
3. 鼠标悬浮“‣”时，去除方框阴影、“折叠/展开”字样
4. 折叠标题，去除方框（任我行主题，可以理解为“去除折叠状态标识”）
相关帖子
被采纳的回答
-
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 所有标题。
请输入回帖内容
...
-
- 其他回帖
-
-
修改后的代码，不知是否你想要的结果
/* 有序列表，折叠时，去除数字方框阴影; 无序列表的折叠阴影不用去除 */ .protyle-wysiwyg [data-node-id].li[data-subtype="o"][fold="1"]>.protyle-action:after{ background-color: transparent; } /* 只显示“‣” */ .protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeList"] svg, .protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeListItem"] svg, .protyle-gutters:not(:has(svg[style*="transform:rotate(90deg)"])) button[data-type="NodeHeading"] 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; } /* 去掉标题折叠按钮背景 */ .protyle-wysiwyg div[fold="1"][data-type=NodeHeading]:before { background:none; }- 折叠状态下，需要常驻显示“‣”
这个常驻不了，因为左侧图标是公用的，即随着鼠标切换到不同的块，这个里的内容会被替换掉，并且这个图标根据鼠标位置实时移动，因此无法针对每个块常驻这里的图标。
如果想实现，必须抛弃现有的实现逻辑，用 before 或插入图标元素等重新设计，这个修改的代价可能太过高昂，且可能存在一些列兼容问题，甚至影响现有插件或现有功能，因此，暂时无法简单的支持，只能用其他样式或标记代替这个箭头按钮来标记折叠状态。
另：折叠状态下，上面的片段似乎会覆盖以下片段
我不知道你说的覆盖是指什么，我这里并没有出现覆盖情况，如果你指折叠时省略号被隐藏的话，这和这段代码无关，你不用这段代码，折叠时省略号也会隐藏（因为省略号超出折叠元素的范围）。
3 回复 -
抱歉，之前的回复有问题，并不是因为省略号超出折叠元素范围导致的，而是因为折叠时标题前面的圆形图标和省略号是选择符是同一个元素，且圆形图标的优先级更高，覆盖了省略号导致的。
所以，我现在在折叠模式下，用标题后面的文字元素再添加个样式来模拟标题元素的省略号，这样就弥补了折叠时标题省略号丢失问题。
代码如下，添加到思源 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: "......"; }感恩！ - 查看全部回帖
