思源笔记常用选择器

常用修改选项

分类 属性 备注
字体类型 font-family 可以设置宋体,楷体,微软雅黑等字体
字体大小 font-size 1.1em 110% 16px
字体颜色 color
字体背景颜色 background-color 可以和颜色进行叠加
字体字重 font-weight 正常为 normal,加粗为 bold
内边距 padding
外边距 margin 可以通过 margin-left,margin-right,margin-top,margin-bottom,修改某个方向的边距,上同
边框 border 1px solid gray 设置 1 像素灰色边框; 0.1em dashed #ebebeb 设置 0.1 倍当前字体大小的虚线浅灰色边框;
可以通过 border-left 修改左侧边框,上下左右单侧边框同理
圆角 border-radius 4px,圆角大小为 4 像素;如果数值很多,比如是 50px,则可以生成半圆
阴影 box-shadow
宽度 width 设置具体数字,如 300px;也可以设置百分比,如 80%,100% 等
高度 height
行间距 line-height 1.5em,即为 1.5 倍行间距
对齐 text-align
text-align: center; 居中对齐,left 为左对齐,right 为右对齐,justify 为两端对齐

外观

中文名称 选择器 备注
顶部 dock 栏 div#toolbar
顶部 dock 栏中图标 #toolbar .toolbar__item svg {
顶部 dock 栏中标题 div#drag 需要加 !important
左侧 dock 栏 div#dockLeft {
右侧 dock 栏 div#dockRight {
编辑区域 .protyle-content {
正文区域(不含标题) .protyle .protyle-wysiwyg {
文档树条目 .b3-list--background .b3-list-item
当前文档树条目 .b3-list--background .b3-list-item--focus {
当前文档树条目文字 .b3-list--background .b3-list-item--focus .b3-list-item__text {
当前文档树条目图标 1 .b3-list--background .b3-list-item--focus .b3-list-item__graphic {
当前文档树条目图标 2 .b3-list--background .b3-list-item--focus .b3-list-item__icon svg {
鼠标悬浮文档树条目 .b3-list--background .b3-list-item:hover:not(.b3-list-item--focus) {
鼠标悬浮文档树条目文字 .b3-list--background .b3-list-item:hover:not(.b3-list-item--focus) .b3-list-item__text {
鼠标悬浮文档树条目图标 .b3-list--background .b3-list-item:hover:not(.b3-list-item--focus) .b3-list-item__icon svg {
标签页 .layout-tab-bar .item {
标签页文字 .layout-tab-bar .item .item__text {
当前标签页 .layout-tab-bar .item--focus {
当前标签页文字 .layout-tab-bar .item--focus .item__text {
当前标签页关闭按钮 .layout-tab-bar .item--focus .item__close svg { 通过 color 可以修改颜色
面包屑 .protyle-breadcrumb {
选中文字后的工具条 .protyle-toolbar {
选中文字后的工具条单个条目 .protyle-toolbar__item {
选中文字后的工具条单个条目鼠标悬浮 .protyle-toolbar__item:hover {
选中文字后的工具条当前条目 .protyle-toolbar__item--current {

行内元素

中文名称 选择器
高亮 mark {
搜索高亮 .protyle-wysiwyg [data-node-id] span[data-type="search-mark"] {
加粗 .b3-typography strong,.protyle-wysiwyg strong {
斜体 .b3-typography em, .protyle-wysiwyg em {
下划线 .b3-typography u,.protyle-wysiwyg u {
删除线 .b3-typography s,.protyle-wysiwyg s {
上标 sup
下标 sub
键盘元素 .b3-typography kbd, .protyle-wysiwyg kbd {
标签 .protyle-wysiwyg [data-node-id] span[data-type="tag"]{
行内代码 .b3-typography code, .protyle-wysiwyg code{
行内数学公式 .protyle-wysiwyg [data-node-id] span[data-type="inline-math"]{
更多字体样式 strong[style="background-color: var(--b3-font-background1);"] { strong[style="color: var(--b3-font-color1);"] {
块引用 .protyle-wysiwyg [data-node-id] span[data-type='block-ref'] {

块级元素

表格

中文名称 选择器
表格整体 .protyle-wysiwyg table,.b3-typography table {
表头 .protyle-wysiwyg table thead,.b3-typography table thead {
表格偶数行 tbody tr:nth-child(2n) {
表格奇数行 tbody tr:nth-child(2n + 1) {
表格第一列 table tr td:first-child {
表格最后一列 table tr td:last-child {
表头单元格 th
表格单元格 td
表格区域(除去表头) tbody
表行 tr
/*例子:给表格设置2像素实线灰色边框(包括表头和正文)*/
th, td {
    border: 2px solid gray !important;
}
中文名称 选择器
引用 .protyle-wysiwyg [data-node-id].bq {
嵌入块 .render-node {
图片(不包括自定义表情) .protyle-wysiwyg img:not(img.emoji) {
代码块 .code-block {
超级块 .protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"]>div,
PDF 双链 .protyle-wysiwyg [data-node-id] span[data-type='file-annotation-ref'] {
分割线 div.hr
文档标题 .protyle-title__input {
1-6 级标题(后面是所有标题) .protyle-wysiwyg [data-node-id].h1 { .protyle-wysiwyg [data-node-id][data-type="NodeHeading"] {

自定义属性

中文名称 选择器
文档的自定义属性 .protyle-wysiwyg[custom-f~=hide] {
块的自定义属性 .protyle-wysiwyg [data-node-id][custom-f~=kaiti] {

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...