登录 注册

分享 css 代码片段，自定义你想要的样式

本贴最后更新于 211 天前，其中的信息可能已经时移世异

CSS 代码片段是帮助你 DIY 外观样式的，参考。用了很多大佬的代码片段，感谢 ❤️ 饮水思源，回馈社区！

图片放大查看

image.png

image.png
借鉴了这个大佬攻略

改改参数，比如 px 可以改粗细之类的

隐藏文档树图标

.b3-list-item__icon {
 display: none ;
}
原来 使用 CSS 后效果
image.png  image.png

隐藏大纲前面的块标记 H

/*隐藏大纲块标记*/
.sy__outline .b3-list-item__graphic {
    display: none;
}
原来 使用 CSS 后效果
image.png  image.png

标题自动编号

body {
    counter-reset: h1-count 0;
}

.h1 {
    counter-reset: h2-count 0;
}

.h2 {
    counter-reset: h3-count 0;
}

.h3 {
    counter-reset: h4-count 0;
}

.h4 {
    counter-reset: h5-count 0;
}

.h5 {
    counter-reset: h6-count 0;
}

.protyle-wysiwyg [data-node-id].h1:before,
.b3-typography h1:before {
    display: block;
    float: left;
    font-size: 100%;
    counter-increment: h1-count;
    content: counter(h1-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h2:before,
.b3-typography h2:before {
    display: block;
    float: left;
    font-size: 100%;
    counter-increment: h2-count;
    content: counter(h1-count) "."counter(h2-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h3:before,
.b3-typography h3:before {
    display: block;
    float: left;
    font-size: 100%;
    counter-increment: h3-count;
    content: counter(h1-count) "."counter(h2-count) "."counter(h3-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h4:before,
.b3-typography h4:before {
    display: block;
    float: left;
    font-size: 100%;
    counter-increment: h4-count;
    content: counter(h1-count) "."counter(h2-count) "."counter(h3-count) "."counter(h4-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h5:before,
.b3-typography h5:before {
    display: block;
    float: left;
    font-size: 100%;
    counter-increment: h5-count;
    content: counter(h1-count) "."counter(h2-count) "."counter(h3-count) "."counter(h4-count) "."counter(h5-count) "\00A0";
}

.protyle-wysiwyg [data-node-id].h6:before,
.b3-typography h6:before {
    display: block;
    float: left;
    font-size: 100%;
    counter-increment: h6-count;
    content: counter(h1-count) "."counter(h2-count) "."counter(h3-count) "."counter(h4-count) "."counter(h5-count) "."counter(h6-count) "\00A0";
}
原来 使用 CSS 后效果
image.png  image.png

隐藏文档滚动条

.protyle-scroll {
display: none;
}
原来 使用 CSS 后效果
image.png  image.png

分割线

.protyle-wysiwyg [data-node-id].hr>div {
    border-bottom: 5px solid var(--b3-theme-background-light); //前一个是粗细，后一个是颜色
}
原来 使用 CSS 后效果
image.png  image.png

长块加纵向滚动条

参考：[思源笔记经验分享] 为长代码块、长嵌入块与长表格添加块内滚动条

/* 滚动条轨道样式 */
.protyle-wysiwyg [data-node-id][custom-render~=scroll]:not([data-type="NodeTable"])::-webkit-scrollbar-track,
.protyle-wysiwyg [data-node-id][custom-render~=scroll][data-type="NodeTable"] table::-webkit-scrollbar-track {
    background-color: var(--b3-border-color);
    border-radius: 8px;
}

/* 为指定块添加纵向滚动条 */
.protyle-wysiwyg [data-node-id][custom-render~=scroll]:not([data-type="NodeTable"]) {
    overflow-y: auto;
    max-height: 50vh;
}

.protyle-wysiwyg [data-node-id][custom-render~=scroll][data-type="NodeTable"] table {
    position: relative;
    overflow-y: auto;
    max-height: 50vh;
}

.protyle-wysiwyg [data-node-id][custom-render~=scroll][data-type="NodeTable"] table>thead {
    position: sticky;
    top: 1px;
    outline: 1px solid var(--b3-theme-primary);
    z-index: 1;
}
原来 使用 CSS 后效果
image.png  image.png

超链接前面加网站 icon

这个依赖 savor 主题

/* ———————————————————————————————————————————————————为链接前的icon图标设置格式———————————————————————————————————————————————— */
.protyle-wysiwyg [data-node-id] span[data-type='a']:not(:empty)::before,
.b3-typography a:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a:not(:empty)::before {
    display: inline-block;
    position: relative;
    background-repeat: no-repeat;
    background-size: 1em 1em;
    top: 0.1em !important;
    width: 1em;
    height: 1em;
    margin-right: 0.2em !important;
}


/* ————————————————————为常见的文件格式设置图标———————————————————— */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href^="file://"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href^="file://"]::before,
.b3-typography a[href^="file://"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/folder.svg');
}

/* ————————————————————为没有收集icon图标的网站设置格式—————————————————— */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href ^="http"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href ^="http"]::before,
.b3-typography a[href ^="http"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/link2.svg');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="weibo.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="weibo.com"]::before,
.b3-typography a[href *="weibo.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/weibo_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="zhihu.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="zhihu.com"]::before,
.b3-typography a[href *="zhihu.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/zhihu_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="t.bilibili.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="t.bilibili.com"]::before,
.b3-typography a[href *="t.bilibili.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/t_bilibili_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="bilibili.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="bilibili.com"]::before,
.b3-typography a[href *="bilibili.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/bilibili_com.png');
}


.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="douban.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="douban.com"]::before,
.b3-typography a[href *="douban.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/douban_com.png');
}


.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="oschina.net"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="oschina.net"]::before,
.b3-typography a[href *="oschina.net"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/oschina_net.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="ld246.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="ld246.com"]::before,
.b3-typography a[href *="ld246.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/ld246_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="music.163.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="music.163.com"]::before,
.b3-typography a[href *="music.163.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/music_163_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="runoob.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="runoob.com"]::before,
.b3-typography a[href *="runoob.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/runoob_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="iconfont.cn"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="iconfont.cn"]::before,
.b3-typography a[href *="iconfont.cn"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/iconfont_cn.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="pan.baidu.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="pan.baidu.com"]::before,
.b3-typography a[href *="pan.baidu.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/pan_baidu_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="yuque.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="yuque.com"]::before,
.b3-typography a[href *="yuque.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/yuque_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="52pojie.cn"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="52pojie.cn"]::before,
.b3-typography a[href *="52pojie.cn"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/52pojie_cn.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="sspai.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="sspai.com"]::before,
.b3-typography a[href *="sspai.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/sspai_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="uisdc.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="uisdc.com"]::before,
.b3-typography a[href *="uisdc.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/uisdc_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="cn.bing.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="cn.bing.com"]::before,
.b3-typography a[href *="cn.bing.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/cn_bing_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="jianshu.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="jianshu.com"]::before,
.b3-typography a[href *="jianshu.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/jianshu_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="blog.csdn.net"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="blog.csdn.net"]::before,
.b3-typography a[href *="blog.csdn.net"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/blog_csdn_net.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="zcool.com.cn"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="zcool.com.cn"]::before,
.b3-typography a[href *="zcool.com.cn"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/zcool_com_cn.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="ixigua.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="ixigua.com"]::before,
.b3-typography a[href *="ixigua.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/ixigua_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="weixin.sogou.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="weixin.sogou.com"]::before,
.b3-typography a[href *="weixin.sogou.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/weixin_sogou_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="baidu.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="baidu.com"]::before,
.b3-typography a[href *="baidu.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/baidu_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="tieba.baidu.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="tieba.baidu.com"]::before,
.b3-typography a[href *="tieba.baidu.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/tieba_baidu_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="fanyi.baidu.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="fanyi.baidu.com"]::before,
.b3-typography a[href *="fanyi.baidu.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fanyi_baidu_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="iplaysoft.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="iplaysoft.com"]::before,
.b3-typography a[href *="iplaysoft.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/iplaysoft_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="huaban.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="huaban.com"]::before,
.b3-typography a[href *="huaban.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/huaban_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="v.qq.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="v.qq.com"]::before,
.b3-typography a[href *="v.qq.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/v_qq_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="iqiyi.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="iqiyi.com"]::before,
.b3-typography a[href *="iqiyi.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/iqiyi_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="youku.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="youku.com"]::before,
.b3-typography a[href *="youku.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/youku_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="haokan.baidu.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="haokan.baidu.com"]::before,
.b3-typography a[href *="haokan.baidu.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/haokan_baidu_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="y.qq.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="y.qq.com"]::before,
.b3-typography a[href *="y.qq.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/y_qq_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="kugou.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="kugou.com"]::before,
.b3-typography a[href *="kugou.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/kugou_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="kuwo.cn"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="kuwo.cn"]::before,
.b3-typography a[href *="kuwo.cn"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/kuwo_cn.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="toutiao.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="toutiao.com"]::before,
.b3-typography a[href *="toutiao.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/toutiao_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="tianya.cn"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="tianya.cn"]::before,
.b3-typography a[href *="tianya.cn"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/tianya_cn.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="bbs.hupu.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="bbs.hupu.com"]::before,
.b3-typography a[href *="bbs.hupu.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/bbs_hupu_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="wiz.cn"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="wiz.cn"]::before,
.b3-typography a[href *="wiz.cn"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/wiz_cn.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="yinxiang.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="yinxiang.com"]::before,
.b3-typography a[href *="yinxiang.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/yinxiang_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="logseq.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="logseq.com"]::before,
.b3-typography a[href *="logseq.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/logseq_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="obsidian.md"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="obsidian.md"]::before,
.b3-typography a[href *="obsidian.md"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/obsidian_md.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="taobao.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="taobao.com"]::before,
.b3-typography a[href *="taobao.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/taobao_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="so.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="so.com"]::before,
.b3-typography a[href *="so.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/so_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="mp.weixin.qq.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="mp.weixin.qq.com"]::before,
.b3-typography a[href *="mp.weixin.qq.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/mp_weixin_qq_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="yandex.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="yandex.com"]::before,
.b3-typography a[href *="yandex.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/yandex_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="wolai.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="wolai.com"]::before,
.b3-typography a[href *="wolai.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/wolai_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="auth.alipay.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="auth.alipay.com"]::before,
.b3-typography a[href *="auth.alipay.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/auth_alipay_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="aliyundrive.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="aliyundrive.com"]::before,
.b3-typography a[href *="aliyundrive.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/aliyundrive_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="baike.baidu.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="baike.baidu.com"]::before,
.b3-typography a[href *="baike.baidu.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/baike_baidu_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="apple.com.cn"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="apple.com.cn"]::before,
.b3-typography a[href *="apple.com.cn"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/apple_com_cn.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="huawei.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="huawei.com"]::before,
.b3-typography a[href *="huawei.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/huawei_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="samsung.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="samsung.com"]::before,
.b3-typography a[href *="samsung.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/samsung_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="mi.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="mi.com"]::before,
.b3-typography a[href *="mi.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/mi_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="oppo.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="oppo.com"]::before,
.b3-typography a[href *="oppo.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/oppo_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="vivo.com.cn"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="vivo.com.cn"]::before,
.b3-typography a[href *="vivo.com.cn"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/vivo_com_cn.png');
}


.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="topbook.cc"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="topbook.cc"]::before,
.b3-typography a[href *="topbook.cc"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/topbook_cc.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="appinn.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="appinn.com"]::before,
.b3-typography a[href *="appinn.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/appinn_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="ghxi.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="ghxi.com"]::before,
.b3-typography a[href *="ghxi.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/ghxi_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="weread.qq.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="weread.qq.com"]::before
.b3-typography a[href *="weread.qq.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/weread_qq_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="news.qq.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="news.qq.com"]::before,
.b3-typography a[href *="news.qq.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/news_qq_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="news.163.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="news.163.com"]::before,
.b3-typography a[href *="news.163.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/news_163_com.png');
}

.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="guancha.cn"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="guancha.cn"]::before,
.b3-typography a[href *="guancha.cn"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/guancha_cn.png');
}

/* pocket */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="getpocket.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="getpocket.com"]::before,
.b3-typography a[href *="getpocket.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/getpocket_com.png');
}

/* instapaper */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="instapaper.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="instapaper.com"]::before,
.b3-typography a[href *="instapaper.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/instapaper_com.png');
}

/* GitHub */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="github.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="github.com"]::before,
.b3-typography a[href *="github.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/github_com.png');
}

/* 谷歌翻译 */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="translate.google.cn"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="translate.google.cn"]::before,
.b3-typography a[href *="translate.google.cn"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/translate_google_cn.png');
}


/* zotero */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="zotero"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="zotero"]::before,
.b3-typography a[href *="zotero"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/zotero.png');
}

/* 搜狐 */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="sohu.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="sohu.com"]::before,
.b3-typography a[href *="sohu.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/souhu.svg');
}

/* 豌豆荚 */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="wandoujia.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="wandoujia.com"]::before,
.b3-typography a[href *="wandoujia.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/wandou.svg');
}

/* Reddit */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="redditinc.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="redditinc.com"]::before,
.b3-typography a[href *="redditinc.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/reddit.svg');
}

/* Instagram.com */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="Instagram.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="Instagram.com"]::before,
.b3-typography a[href *="Instagram.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/ins.svg');
}

/* twitter.com */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="twitter.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="twitter.com"]::before,
.b3-typography a[href *="twitter.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/Twitter.svg');
}

/* facebook.com */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="facebook.com"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="facebook.com"]::before,
.b3-typography a[href *="facebook.com"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/Facebook.svg');
}

/* notion */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="notion"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href *="notion"]::before,
.b3-typography a[href *="notion"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/notion.svg');
}

/* Youtube */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href *="youtube"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id]a[href *="youtube"]::before,
.b3-typography a[href *="youtube"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/youtube.svg');
}
/* bookxnote */
.protyle-wysiwyg [data-node-id] span[data-type~='a'][data-href^="bookxnotepro://"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href^="bookxnotepro://"]::before,
.b3-typography a[href^="bookxnotepro://"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/bookxnote.ico');
}
/* liquidtext */
.protyle-wysiwyg [data-node-id] span[data-type~='a'][data-href^="lt://"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href^="lt://"]::before,
.b3-typography a[href^="lt://"]::before
{
	content:"";
	background-image:url("/appearance/themes/Savor/icon/liquidtext.svg")
}





/* ————————————————————为常见的文件格式设置图标———————————————————— */
/* 文件夹 */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href^="file://"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href^="file://"]::before,
.b3-typography a[href^="file://"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/folder.svg');
}

/* 压缩包 */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".zip"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".zip"]::before,
.b3-typography a[href ^="assets/"][href $=".zip"]::before,
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".rar"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".rar"]::before,
.b3-typography a[href ^="assets/"][href $=".rar"]::before,
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".7z"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".7z"]::before,
.b3-typography a[href ^="assets/"][href $=".7z"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/zip.svg');
}

/* word */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".docx"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".docx"]::before,
.b3-typography [href ^="assets/"][href $=".docx"]::before,
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".doc"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".doc"]::before,
.b3-typography [href ^="assets/"][href $=".doc"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/word.svg');
}

/* ppt */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".pptx"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".pptx"]::before,
.b3-typography [href ^="assets/"][href $=".pptx"]::before,
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".ppt"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".ppt"]::before,
.b3-typography [href ^="assets/"][href $=".ppt"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/ppt.svg');
}

/* excel */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".xlsx"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".xlsx"]::before,
.b3-typography [href ^="assets/"][href $=".xlsx"]::before,
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".xls"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".xls"]::before,
.b3-typography [href ^="assets/"][href $=".xls"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/excel.svg');
}

/* pdf */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".pdf"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".pdf"]::before,
.b3-typography [href ^="assets/"][href $=".pdf"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/pdf.svg');
}

/* txt */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".txt"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".txt"]::before,
.b3-typography [href ^="assets/"][href $=".txt"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/txt.svg');
}

/* 视频 */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".mp4"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".mp4"]::before,
.b3-typography [href ^="assets/"][href $=".mp4"]::before,
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".m4v"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".m4v"]::before,
.b3-typography [href ^="assets/"][href $=".m4v"]::before,
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".mov"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".mov"]::before,
.b3-typography [href ^="assets/"][href $=".mov"]::before,
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".flv"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".flv"]::before,
.b3-typography [href ^="assets/"][href $=".flv"]::before,
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".avi"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".avi"]::before,
.b3-typography [href ^="assets/"][href $=".avi"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/MP4.svg');
}

/* 图片 */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".jpg"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".jpg"]::before,
.b3-typography [href ^="assets/"][href $=".jpg"]::before,
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".png"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".png"]::before,
.b3-typography [href ^="assets/"][href $=".png"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/jpg.svg');
}

/* html */
/* .protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".html"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".html"]::before,
.b3-typography [href ^="assets/"][href $=".html"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/html.svg');
} */

/* json */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".json"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".json"]::before,
.b3-typography [href ^="assets/"][href $=".json"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/json.svg');
}

/* css */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".css"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".css"]::before,
.b3-typography [href ^="assets/"][href $=".css"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/css.svg');
}

/* js,c++等 */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".java"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".java"]::before,
.b3-typography [href ^="assets/"][href $=".java"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/JAVA.svg');
}

/* js,c++等 */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".js"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".js"]::before,
.b3-typography [href ^="assets/"][href $=".js"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/vscode.svg');
}

/* xmind */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".xmind"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".xmind"]::before,
.b3-typography [href ^="assets/"][href $=".xmind"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/xmind.svg');
}

/* xmind */
.protyle-wysiwyg [data-node-id] span[data-type='a'][data-href $=".md"]:not(:empty)::before,
.protyle-wysiwyg [data-node-id] a[href $=".md"]::before,
.b3-typography [href ^="assets/"][href $=".md"]::before {
    content: "";
    background-image: url('/appearance/themes/Savor/icon/fold/md.svg');
}




/* ————————————————————————————————————————————————————文件格式到此为止—————————————————————————————————————————————————————— */
原来 使用 CSS 后效果
image.png  image.png

先写到这吧

小白一个，不懂代码，只会收集代码片段。如有帮助点个赞 ❤️

  • 思源笔记

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

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

    16137 引用 • 57252 回帖 • 1 关注
9 感谢
1 关注
12 收藏
6 赞同
9 回帖
1.3k 449 27 241 22 5 518

相关帖子

9 回帖
分享 css 代码片段，自定义你想要的样式

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...
Yylicon
回帖
125
 帖子
38
 积分
3791