总需求：
有点复杂，以有序列表为例：
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 回复 -
- 查看全部回帖
