CSS 选择器参考
CSS 选择器参考
CSS 选择器参考
Fern 选择器使用 Tailwind CSS 工具类和 CSS 自定义属性。本页面列出了用于自定义文档站点的所有 .fern-* 选择器。
用于页面布局、背景和标题的选择器。
固定背景图片。
主页面标题(h1)。
页面布局容器。
指南页面布局。
带两列网格的 API Reference 布局。
概览页面布局。
变更日志页面布局。
用于站点头部、标签页和移动端菜单的选择器。
站点头部容器。
头部导航标签(仅桌面端)。
头部 Logo 容器。
头部搜索输入框(仅桌面端)。
用于侧边栏导航和标签页的选择器。
侧边栏顶部。
侧边栏分组标题。
侧边栏标题文本。
侧边栏链接。
侧边栏链接文本。
长标题的跑马灯动画。
分组的侧边栏项目。
侧边栏标签导航。
用于面包屑导航的选择器。
面包屑导航。
面包屑链接或文本。
面包屑分隔符。
用于按钮的选择器。
带变体的按钮。
变体:
.minimal - 透明背景,悬停时有轻微样式.filled - 实心背景色.outlined - 带边框,背景透明.primary - 强调色变体.success - 绿色变体.warning - 琥珀色变体.danger - 红色变体尺寸修饰符:
.small - 较小的按钮(桌面端 1.75rem 高,移动端 1.5rem 高).large - 较大的按钮(桌面端 2.75rem 高,移动端 2.5rem 高).square - 等宽等高的方形按钮按钮内容包装器。
按钮文本。
按钮组。
代码块 的复制按钮。
设置 maxLines 的代码块 的展开按钮。
页面操作按钮(编辑、反馈、分享)。
变体:
.fern-toolbar - 移除边框样式,呈现工具栏式外观用于卡片的选择器。
卡片容器。
变体:
.interactive - 添加悬停效果.elevated - 突出外观,带强调色边框.active - 激活状态样式用于表单输入和控件的选择器。
文本输入框。
带聚焦边框的输入容器。
输入框图标。
输入框右侧元素。
输入框清除按钮。
多行文本输入框。
文本域容器。
复选框标签。
复选框输入。
选中指示符。
单选按钮组。
单选按钮标签。
单选按钮输入。
选中指示符。
分段切换控件。
带步进按钮的数字输入框。
数字输入框的步进按钮。
用于下拉菜单和产品选择器的选择器。
下拉菜单容器。
下拉菜单项。
下拉菜单选中指示符。
选择项。
选择项图标。
选择项标题。
选择项末端图标。
产品选择器。示例参见 styles.css。
产品选择器单选按钮组。示例参见 styles.css。
用于手风琴组件的选择器。
手风琴容器。
手风琴项。
展开/折叠触发器。
展开/折叠箭头。
手风琴触发器标题。
用于可滚动区域的选择器。
可滚动区域容器。
滚动视口。
滚动条。
滚动条滑块。
滚动条角落。
用于徽章和 HTTP 方法标签的选择器。
用于标签、状态和 HTTP 方法的徽章。
用于链接、提示框、步骤组件和表格的选择器。
带外部链接图标和悬停下划线的链接。
标注,颜色与 intent 相匹配。
Intent 变体:
[data-intent="info"] - 灰色/中性(默认)[data-intent="warning"] - 琥珀色/黄色[data-intent="success"] - 绿色[data-intent="error"] - 红色[data-intent="note"] - 蓝色[data-intent="launch"] - 强调色[data-intent="tip"] - 绿色[data-intent="check"] - 绿色带垂直引导线的缩进组件。
步骤组件的容器。
单个步骤。
用于深度链接的锚点组件。
表格容器。
支持 .sticky 类的表格,可启用粘性表头。
用于变更日志筛选 UI 的选择器。仅在带有标签的变更日志页面上出现。
筛选器下拉菜单触发按钮。
筛选器按钮文本。
筛选器按钮的尖角图标。
筛选器下拉项。
筛选徽章基类。
已选中的筛选徽章。
未选中的筛选徽章。
筛选器下拉勾选标记。
用于 API Reference 组件的选择器。
API 属性容器。
API 属性头部。
API 属性名。
API 属性元数据(类型、是否必填)。
API 属性约束。
高亮文本。
行内图标(自适应主题)。
带下划线的工具提示触发器。
工具提示内容。
文件类型图标。
可折叠子元素。
RSS 订阅按钮。
用于变更日志页面的选择器。
变更日志页面容器。
变体:
.full-width - 全宽布局,日期显示于侧边栏变更日志条目。
变更日志日期。
变更日志内容区域。
变更日志条目标签。