总需求：
有点复杂，以有序列表为例：
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 所有标题。
请输入回帖内容
...
-
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 所有标题。
2 回复 - 其他回帖
-
-
-
大佬，还有点小问题：
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 回复 - 查看全部回帖
