> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiIxN2VkMmEyYy1kYjkyLTQ2MWMtYmRjNi03NjIwOThmMmY2OGUiLCJleHAiOjE3NzgzMjEwOTksImlhdCI6MTc3ODMyMDc5OX0.JK6Tt2wHbKixfoRlwO5Cr-ZAq0k0w4mCk0El8VkTHFw
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# CSS 选择器参考

> Fern 文档中所有可用 CSS 选择器的参考指南。可用于自定义布局、导航、按钮、表单、手风琴、徽章、API 组件等。

Fern 选择器使用 Tailwind CSS 工具类和 CSS 自定义属性。本页面列出了用于自定义文档站点的所有 `.fern-*` 选择器。

## 布局与结构

用于页面布局、背景和标题的选择器。

<AccordionGroup>
  <Accordion title=".fern-background-image">
    固定背景图片。

    ```css Default CSS
    .fern-background-image {
      background-attachment: fixed;
      background-size: cover;
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: center;
    }
    ```
  </Accordion>

  <Accordion title=".fern-page-heading">
    主页面标题（h1）。

    ```css Default CSS
    .fern-page-heading {
      margin-top: 0;
      margin-bottom: 0;
      display: inline-block;
      leading-tight: 1.25;
      text-wrap: balance;
      word-wrap: break-word;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-page">
    页面布局容器。

    ```css Default CSS
    .fern-layout-page {
      max-width: var(--page-width-padded);
      padding-left: var(--page-padding);
      padding-right: var(--page-padding);
      margin-left: auto;
      margin-right: auto;
      min-width: 0;
      flex: 1 1 0%;
      min-height: calc(100vh - var(--header-height));
      display: flex;
      flex-direction: column;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-guide">
    指南页面布局。

    ```css Default CSS
    .fern-layout-guide {
      padding-left: var(--page-padding);
      padding-right: var(--page-padding);
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 3rem;
      min-width: 0;
      flex-shrink: 1;
      min-height: calc(100vh - var(--header-height));
      display: flex;
      flex-direction: column;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-reference">
    带两列网格的 API Reference 布局。

    ```css Default CSS
    .fern-layout-reference {
      padding-left: var(--page-padding);
      margin-left: auto;
      margin-right: auto;
      min-width: 0;
      flex-shrink: 1;
      padding-right: calc(var(--page-padding) + var(--aside-offset));
      min-height: calc(100vh - var(--header-height));
      display: flex;
      flex-direction: column;
    }

    .fern-layout-reference-content {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 768px) {
      .fern-layout-reference-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
      }
    }

    @media (min-width: 1024px) {
      .fern-layout-reference-content {
        gap: 3rem;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-overview">
    概览页面布局。

    ```css Default CSS
    .fern-layout-overview {
      padding-left: var(--page-padding);
      padding-right: var(--page-padding);
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 3rem;
      min-width: 0;
      flex-shrink: 1;
      min-height: calc(100vh - var(--header-height));
      display: flex;
      flex-direction: column;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-changelog">
    变更日志页面布局。

    ```css Default CSS
    .fern-layout-changelog[data-aside-state="hidden"] {
      max-width: var(--page-width-padded);
      padding-left: var(--page-padding);
      padding-right: var(--page-padding);
      margin-left: auto;
      margin-right: auto;
      min-width: 0;
    }

    .fern-layout-changelog[data-aside-state="visible"] {
      padding-left: var(--page-padding);
      padding-right: var(--page-padding);
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 3rem;
      min-width: 0;
      flex-shrink: 1;
    }
    ```
  </Accordion>
</AccordionGroup>

## 头部组件

用于站点头部、标签页和移动端菜单的选择器。

<AccordionGroup>
  <Accordion title=".fern-header">
    站点头部容器。

    ```css Default CSS
    .fern-header {
      backdrop-filter: blur(0.5rem);
      background-color: transparent;
    }
    ```
  </Accordion>

  <Accordion title=".fern-header-tabs">
    头部导航标签（仅桌面端）。

    ```css Default CSS
    .fern-header-tabs {
      backdrop-filter: blur(0.5rem);
      background-color: transparent;
      display: none;
      max-width: 100%;
      user-select: none;
    }

    @media (min-width: 1024px) {
      .fern-header-tabs {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-header-logo-container">
    头部 Logo 容器。

    ```css Default CSS
    .fern-header-logo-container {
      position: relative;
      display: flex;
      height: 100%;
      min-width: fit-content;
      flex: 1 1 0%;
      flex-shrink: 0;
      gap: 0.5rem;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-header-search-bar">
    头部搜索输入框（仅桌面端）。

    ```css Default CSS
    .fern-header-search-bar {
      display: none;
      width: 100%;
      min-width: 0;
      flex-shrink: 1;
    }

    @media (min-width: 1024px) {
      .fern-header-search-bar {
        display: inline-flex;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-header-navbar-links">
    头部导航链接容器。

    ```css Default CSS
    .fern-header-navbar-links {
      display: none;
      flex: 1 1 0%;
    }

    @media (min-width: 1024px) {
      .fern-header-navbar-links {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-header-mobile-menu-button">
    移动端菜单切换按钮。

    ```css Default CSS
    .fern-header-mobile-menu-button {
      display: flex;
      flex: 1 1 0%;
      align-items: center;
      justify-content: flex-end;
    }
    ```
  </Accordion>
</AccordionGroup>

## 侧边栏组件

用于侧边栏导航和标签页的选择器。

<AccordionGroup>
  <Accordion title=".fern-sidebar-header">
    侧边栏顶部。

    ```css Default CSS
    .fern-sidebar-header {
      height: var(--header-height);
      margin-left: 0.75rem;
      margin-right: 0.75rem;
      display: none;
      border-bottom: 1px solid transparent;
    }

    @media (min-width: 1024px) {
      .fern-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-heading">
    侧边栏分组标题。

    ```css Default CSS
    .fern-sidebar-heading {
      margin-bottom: 0.25rem;
      display: flex;
      min-height: 32px;
      align-items: center;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    @media (min-width: 1024px) {
      .fern-sidebar-heading {
        min-height: 36px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-heading-content">
    侧边栏标题文本。

    ```css Default CSS
    .fern-sidebar-heading-content {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.5rem;
    }

    @media (min-width: 1024px) {
      .fern-sidebar-heading-content {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-link">
    侧边栏链接。

    ```css Default CSS
    .fern-sidebar-link {
      color: var(--grayscale-a11);
      display: flex;
      width: 100%;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 1rem;
      text-align: left;
      font-size: 1rem;
      line-height: 1.25;
      transition-property: color, background-color;
    }

    @media (min-width: 1024px) {
      .fern-sidebar-link {
        border-radius: var(--radius-2);
        padding: 0.5rem;
        font-size: 0.875rem;
      }
    }

    .fern-sidebar-link:hover {
      color: var(--grayscale-a12);
      background-color: var(--grayscale-a3);
      transition: none;
    }

    .fern-sidebar-link[data-state="active"] {
      color: var(--accent-a11);
      background-color: var(--accent-a3);
      font-weight: 500;
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-link-title">
    侧边栏链接文本。

    ```css Default CSS
    .fern-sidebar-link-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .fern-sidebar-link-title.marquee-active {
      text-overflow: clip;
    }

    .fern-sidebar-link-title.wrap-mode {
      white-space: normal;
      overflow-wrap: anywhere;
      text-overflow: clip;
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-link-title-inner">
    长标题的跑马灯动画。

    ```css Default CSS
    .fern-sidebar-link-title-inner {
      display: inline;
      will-change: transform;
      transform: translateX(0);
    }

    .fern-sidebar-link-title-inner.is-marquee {
      display: inline-block;
      animation: fern-sidebar-marquee var(--marquee-duration, 4s) linear forwards;
    }

    @keyframes fern-sidebar-marquee {
      to {
        transform: translateX(var(--marquee-translate, 0));
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-group">
    分组的侧边栏项目。

    ```css Default CSS
    .fern-sidebar-group {
      list-style: none;
      margin-left: -1rem;
      margin-right: -1rem;
    }

    @media (min-width: 1024px) {
      .fern-sidebar-group {
        margin-left: 0;
        margin-right: 0;
      }
    }

    .fern-sidebar-group .fern-sidebar-group {
      margin-left: 0;
      margin-right: 0;
    }
    ```
  </Accordion>

  <Accordion title=".fern-sidebar-tabs">
    侧边栏标签导航。

    ```css Default CSS
    .fern-sidebar-tabs {
      margin-top: 1.25rem;
      margin-bottom: 1.5rem;
      display: flex;
      flex-direction: column;
      list-style: none;
    }
    ```
  </Accordion>
</AccordionGroup>

## 导航组件

用于面包屑导航的选择器。

<AccordionGroup>
  <Accordion title=".fern-breadcrumb">
    面包屑导航。

    ```css Default CSS
    .fern-breadcrumb {
      display: inline-flex;
      height: fit-content;
      max-width: 100%;
      flex-wrap: wrap;
      align-items: baseline;
      font-weight: 500;
    }
    ```
  </Accordion>

  <Accordion title=".fern-breadcrumb-item">
    面包屑链接或文本。

    ```css Default CSS
    .fern-breadcrumb-item {
      color: var(--accent-a11);
      min-width: 0;
      flex-shrink: 1;
      font-size: 0.875rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-breadcrumb-arrow">
    面包屑分隔符。

    ```css Default CSS
    .fern-breadcrumb-arrow {
      color: var(--grayscale-a9);
      margin-left: 0.125rem;
      margin-right: 0.125rem;
      width: 1rem;
      height: 1rem;
      align-self: center;
    }
    ```
  </Accordion>
</AccordionGroup>

## 按钮组件

用于按钮的选择器。

<AccordionGroup>
  <Accordion title=".fern-button">
    带变体的按钮。

    ```css Default CSS
    .fern-button {
      transition-property: color, background-color;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-2);
      height: 2.5rem;
      padding: 0.25rem 0.75rem;
      font-size: 0.875rem;
      cursor: pointer;
    }

    @media (min-width: 640px) {
      .fern-button {
        height: 2rem;
      }
    }

    .fern-button:hover {
      transition: none;
    }
    ```

    **变体：**

    * `.minimal` - 透明背景，悬停时有轻微样式
    * `.filled` - 实心背景色
    * `.outlined` - 带边框，背景透明
    * `.primary` - 强调色变体
    * `.success` - 绿色变体
    * `.warning` - 琥珀色变体
    * `.danger` - 红色变体

    **尺寸修饰符：**

    * `.small` - 较小的按钮（桌面端 1.75rem 高，移动端 1.5rem 高）
    * `.large` - 较大的按钮（桌面端 2.75rem 高，移动端 2.5rem 高）
    * `.square` - 等宽等高的方形按钮
  </Accordion>

  <Accordion title=".fern-button-content">
    按钮内容包装器。

    ```css Default CSS
    .fern-button-content {
      display: inline-flex;
      min-width: 0;
      flex-shrink: 1;
      align-items: center;
      height: 1.5rem;
      gap: 0.375rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-button-text">
    按钮文本。

    ```css Default CSS
    .fern-button-text {
      min-width: 0;
      flex-shrink: 1;
      font-weight: 500;
    }

    .fern-button:not(.multiline) .fern-button-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    ```
  </Accordion>

  <Accordion title=".fern-button-group">
    按钮组。

    ```css Default CSS
    .fern-button-group {
      display: inline-flex;
      align-items: center;
    }

    .fern-button-group > .fern-button:has(+ .fern-button.outlined, + .fern-button.filled),
    .fern-button-group > .fern-button.outlined:has(+ .fern-button.minimal),
    .fern-button-group > .fern-button.filled:has(+ .fern-button.minimal) {
      margin-right: 0.5rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-copy-button">
    [代码块](/learn/docs/writing-content/components/code-blocks) 的复制按钮。

    ```css Default CSS
    .fern-copy-button {
      width: fit-content;
      height: fit-content;
      backdrop-filter: blur(8px);
    }
    ```
  </Accordion>

  <Accordion title=".fern-expand-button">
    [设置 `maxLines` 的代码块](/learn/docs/writing-content/components/code-blocks#max-height) 的展开按钮。

    ```css Default CSS
    .fern-expand-button {
      width: fit-content;
      height: fit-content;
      backdrop-filter: blur(8px);
    }
    ```
  </Accordion>

  <Accordion title=".fern-page-actions">
    页面操作按钮（编辑、反馈、分享）。

    ```css Default CSS
    .fern-page-actions {
      display: flex;
      border-radius: var(--radius-2);
      border: 1px solid var(--border-default);
    }

    .fern-page-actions > *:not(:last-child) {
      border-right: 1px solid var(--border-default);
      margin-right: -1px;
    }
    ```

    **变体：**

    * `.fern-toolbar` - 移除边框样式，呈现工具栏式外观
  </Accordion>
</AccordionGroup>

## 卡片组件

用于[卡片](/learn/docs/writing-content/components/cards)的选择器。

<AccordionGroup>
  <Accordion title=".fern-card">
    卡片容器。

    ```css Default CSS
    .fern-card {
      color: var(--text-body);
      background-color: var(--card-background);
      border: 1px solid var(--border-default);
      box-shadow: 0 2px 4px var(--grayscale-a3);
      transition-property: all;
    }

    .fern-card:hover {
      color: var(--text-body);
      transition: none;
    }

    .fern-card.interactive:hover {
      box-shadow: 0 4px 8px var(--grayscale-a4);
      border-color: var(--accent-a9);
    }

    .fern-card.elevated {
      border-color: var(--accent-a9);
      box-shadow: 0 4px 12px var(--accent-a4);
    }
    ```

    **变体：**

    * `.interactive` - 添加悬停效果
    * `.elevated` - 突出外观，带强调色边框
    * `.active` - 激活状态样式
  </Accordion>
</AccordionGroup>

## 表单组件

用于表单输入和控件的选择器。

<AccordionGroup>
  <Accordion title=".fern-input">
    文本输入框。

    ```css Default CSS
    .fern-input {
      width: 100%;
      border: none;
      background-color: transparent;
      outline: none;
      caret-color: var(--accent);
      padding: 0.5rem 0.625rem;
      font-size: 0.875rem;
    }

    @media (max-width: 640px) {
      .fern-input {
        font-size: 1rem;
      }
    }

    input.fern-input::-webkit-outer-spin-button,
    input.fern-input::-webkit-inner-spin-button {
      appearance: none;
      margin: 0;
    }

    input.fern-input[type="number"] {
      appearance: textfield;
    }
    ```
  </Accordion>

  <Accordion title=".fern-input-group">
    带聚焦边框的输入容器。

    ```css Default CSS
    .fern-input-group {
      display: flex;
      align-items: center;
      overflow: hidden;
      border-radius: var(--radius-2);
      background-color: white;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--border-default);
      height: 2.5rem;
    }

    @media (prefers-color-scheme: dark) {
      .fern-input-group {
        background-color: var(--grayscale-a2);
      }
    }

    @media (min-width: 640px) {
      .fern-input-group {
        height: 2rem;
      }
    }

    .fern-input-group:focus-within {
      outline: none;
      border-color: var(--accent-a5);
      box-shadow: 0 0 0 2px var(--accent-a5);
    }

    .fern-input-group.error {
      background: rgba(252, 100, 100, 0.63);
    }
    ```
  </Accordion>

  <Accordion title=".fern-input-icon">
    输入框图标。

    ```css Default CSS
    .fern-input-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 2rem;
      flex-shrink: 0;
    }

    .fern-input-icon + .fern-input {
      margin-left: -2rem;
      padding-left: 2rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-input-right-element">
    输入框右侧元素。

    ```css Default CSS
    .fern-input-right-element {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: -0.5rem;
      height: 100%;
      min-width: 2rem;
      flex-shrink: 0;
      padding-left: 0;
      padding-right: 0;
    }
    ```
  </Accordion>

  <Accordion title=".fern-input-clear-button">
    输入框清除按钮。

    ```css Default CSS
    .fern-input-clear-button {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--grayscale-a9);
      width: 1.5rem;
      height: 1.5rem;
      flex-shrink: 0;
      margin-right: 0.25rem;
      cursor: pointer;
      border: none;
      background-color: transparent;
      transition: color 0.15s;
    }

    .fern-input-clear-button:hover {
      color: var(--grayscale-a11);
    }
    ```
  </Accordion>

  <Accordion title=".fern-textarea">
    多行文本输入框。

    ```css Default CSS
    .fern-textarea {
      width: 100%;
      resize: none;
      border: none;
      background-color: transparent;
      outline: none;
      caret-color: var(--accent);
      padding: 0.5rem 0.625rem;
      font-size: 0.875rem;
    }

    @media (max-width: 640px) {
      .fern-textarea {
        font-size: 1rem;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-textarea-group">
    文本域容器。

    ```css Default CSS
    .fern-textarea-group {
      display: flex;
      align-items: center;
      overflow: hidden;
      border-radius: var(--radius-2);
      background-color: white;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--border-default);
    }

    @media (prefers-color-scheme: dark) {
      .fern-textarea-group {
        background-color: var(--grayscale-a2);
      }
    }

    .fern-textarea-group:focus-within {
      outline: none;
      border-color: var(--accent-a5);
      box-shadow: 0 0 0 2px var(--accent-a5);
    }
    ```
  </Accordion>

  <Accordion title=".fern-checkbox-label">
    复选框标签。

    ```css Default CSS
    .fern-checkbox-label {
      display: flex;
      cursor: pointer;
    }
    ```
  </Accordion>

  <Accordion title=".fern-checkbox-item">
    复选框输入。

    ```css Default CSS
    .fern-checkbox-item {
      border-radius: var(--radius-1);
      position: relative;
      margin-top: 0.125rem;
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border: 1px solid var(--border-default);
    }

    .fern-checkbox-item:hover {
      background-color: var(--accent-a3);
    }

    .fern-checkbox-item:focus {
      outline: 4px solid var(--accent-a3);
      outline-offset: 0;
    }
    ```
  </Accordion>

  <Accordion title=".fern-checkbox-indicator">
    选中指示符。

    ```css Default CSS
    .fern-checkbox-indicator {
      background-color: var(--accent);
      color: var(--accent-contrast);
      border-radius: var(--radius-1);
      display: flex;
      width: 1rem;
      height: 1rem;
      align-items: center;
      justify-content: center;
    }
    ```
  </Accordion>

  <Accordion title=".fern-radio-group">
    单选按钮组。

    ```css Default CSS
    .fern-radio-group {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .fern-radio-group.compact {
      gap: 0.5rem;
      font-size: 0.875rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-radio-label">
    单选按钮标签。

    ```css Default CSS
    .fern-radio-label {
      display: flex;
      cursor: pointer;
    }
    ```
  </Accordion>

  <Accordion title=".fern-radio-item">
    单选按钮输入。

    ```css Default CSS
    .fern-radio-item {
      border: 1px solid var(--border-default);
      position: relative;
      margin-top: 0.125rem;
      display: inline-block;
      width: 1rem;
      height: 1rem;
      border-radius: 9999px;
    }

    .fern-radio-item:hover {
      background-color: var(--accent-a3);
    }

    .fern-radio-item:focus {
      outline: 4px solid var(--accent-a3);
      outline-offset: 0;
    }
    ```
  </Accordion>

  <Accordion title=".fern-radio-indicator">
    选中指示符。

    ```css Default CSS
    .fern-radio-indicator {
      background-color: var(--accent);
      display: flex;
      width: 1rem;
      height: 1rem;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
    }

    .fern-radio-indicator::after {
      background-color: var(--background);
      position: absolute;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 9999px;
      content: "";
    }
    ```
  </Accordion>

  <Accordion title=".fern-segmented-control">
    分段切换控件。

    ```css Default CSS
    .fern-segmented-control {
      border-radius: var(--radius-3/2);
      height: 2.25rem;
      background-color: white;
      display: flex;
      align-items: center;
      gap: 1px;
      padding: 0.125rem;
      border: 1px solid var(--border-default);
    }

    @media (prefers-color-scheme: dark) {
      .fern-segmented-control {
        background-color: rgba(255, 255, 255, 0.05);
      }
    }

    .fern-segmented-control .fern-button {
      border-radius: var(--radius-1);
      min-width: 0;
      flex-shrink: 1;
    }
    ```
  </Accordion>

  <Accordion title=".fern-numeric-input-group">
    带步进按钮的数字输入框。

    ```css Default CSS
    .fern-numeric-input-group {
      display: flex;
      align-items: center;
      overflow: hidden;
      border-radius: var(--radius-2);
      background-color: white;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--border-default);
      height: 2.5rem;
    }

    @media (min-width: 640px) {
      .fern-numeric-input-group {
        height: 2rem;
      }
    }

    .fern-numeric-input-group:focus-within {
      outline: none;
      border-color: var(--accent-a5);
      box-shadow: 0 0 0 2px var(--accent-a5);
    }
    ```
  </Accordion>

  <Accordion title=".fern-numeric-input-step">
    数字输入框的步进按钮。

    ```css Default CSS
    .fern-numeric-input-group .fern-numeric-input-step {
      border-color: var(--border-default);
      height: 100%;
      border-radius: 0;
    }

    .fern-numeric-input-group .fern-numeric-input-step:first-child {
      border-top-left-radius: var(--radius-3/2);
      border-bottom-left-radius: var(--radius-3/2);
      border-right: 1px solid;
    }

    .fern-numeric-input-group .fern-numeric-input-step:last-child {
      border-top-right-radius: var(--radius-3/2);
      border-bottom-right-radius: var(--radius-3/2);
      border-left: 1px solid;
    }

    .fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled) {
      color: var(--accent-a11);
      border-color: var(--accent-a5);
    }

    .fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled):hover {
      color: var(--accent-a11);
      background-color: var(--accent-a3);
    }
    ```
  </Accordion>
</AccordionGroup>

## 下拉菜单与选择器组件

用于下拉菜单和[产品选择器](/learn/docs/configuration/products)的选择器。

<AccordionGroup>
  <Accordion title=".fern-dropdown">
    下拉菜单容器。

    ```css Default CSS
    .fern-dropdown {
      position: relative;
      z-index: 50;
      animation: popover-in 150ms ease-out;
      min-width: var(--radix-dropdown-menu-trigger-width);
      background-color: var(--background);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-2);
      display: flex;
      max-height: 300px;
      flex-direction: column;
      backdrop-filter: blur(8px);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }
    ```
  </Accordion>

  <Accordion title=".fern-dropdown-item">
    下拉菜单项。

    ```css Default CSS
    .fern-dropdown-item {
      border-radius: var(--radius-1);
      display: flex;
      width: 100%;
      cursor: default;
      align-items: center;
      justify-content: flex-start;
      padding: 0.25rem 0.5rem;
      text-align: left;
      font-size: 0.875rem;
    }

    .fern-dropdown-item[data-highlighted] {
      color: var(--accent-contrast);
      background-color: var(--accent);
    }
    ```
  </Accordion>

  <Accordion title=".fern-dropdown-item-indicator">
    下拉菜单选中指示符。

    ```css Default CSS
    .fern-dropdown-item-indicator {
      margin-right: 0.25rem;
      display: flex;
      height: 100%;
      width: 1rem;
      flex: none;
      align-items: center;
      justify-content: center;
    }
    ```
  </Accordion>

  <Accordion title=".fern-selection-item">
    选择项。

    ```css Default CSS
    .fern-selection-item {
      border-radius: var(--radius-3/2);
      display: flex;
      flex: 1 1 0%;
      cursor: pointer;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      border: 1px solid transparent;
      padding: 0.25rem 0.625rem 0.25rem 0.25rem;
      width: 100%;
      text-align: left;
      transition: all 200ms ease-in-out;
    }

    .fern-selection-item:hover {
      color: var(--accent);
      background-color: var(--grayscale-a3);
    }
    ```
  </Accordion>

  <Accordion title=".fern-selection-item-icon">
    选择项图标。

    ```css Default CSS
    .fern-selection-item-icon {
      border-radius: var(--radius-2);
      color: var(--grayscale-a11);
      margin: 0.25rem;
      display: flex;
      height: 56px;
      width: 56px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .fern-selection-item-icon.use-icon {
      border: 1px solid var(--grayscale-a5);
      padding: 0.25rem;
    }

    .fern-selection-item-icon svg,
    .fern-selection-item-icon .fern-file-icon {
      display: block;
      height: 50%;
      width: 50%;
      transition: all 300ms ease-in-out;
    }

    .fern-selection-item:hover .fern-selection-item-icon svg,
    .fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
      transform: scale(1.2);
    }

    .fern-selection-item.dense .fern-selection-item-icon {
      margin: 0.125rem;
      height: 36px;
      width: 36px;
      padding: 0.125rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-selection-item-title">
    选择项标题。

    ```css Default CSS
    .fern-selection-item-title {
      color: var(--grayscale-a12);
      font-weight: 700;
      line-height: 1.25;
    }

    @media (min-width: 1024px) {
      .fern-selection-item-title {
        font-size: 0.875rem;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-selection-item-end-icon">
    选择项末端图标。

    ```css Default CSS
    .fern-selection-item-end-icon {
      color: var(--grayscale-a11);
    }
    ```
  </Accordion>

  <Accordion title=".fern-product-selector">
    产品选择器。示例参见 [`styles.css`](https://github.com/fern-api/docs/blob/main/fern/assets/styles.css)。

    ```css Default CSS
    .fern-product-selector {
      width: 100%;
    }

    @media (min-width: 1024px) {
      .fern-product-selector {
        width: auto;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-product-selector-radio-group">
    产品选择器单选按钮组。示例参见 [`styles.css`](https://github.com/fern-api/docs/blob/main/fern/assets/styles.css)。
  </Accordion>
</AccordionGroup>

## 手风琴组件

用于[手风琴组件](/learn/docs/writing-content/components/accordions)的选择器。

<AccordionGroup>
  <Accordion title=".fern-accordion">
    手风琴容器。

    ```css Default CSS
    .fern-accordion {
      border-radius: var(--radius-3);
      border-top: 1px solid var(--border-default);
    }

    .fern-accordion li {
      list-style-position: outside;
    }
    ```
  </Accordion>

  <Accordion title=".fern-accordion-item">
    手风琴项。

    ```css Default CSS
    .fern-accordion-item {
      overflow: hidden;
    }

    .fern-accordion-item:first-child {
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }

    .fern-accordion-item:last-child {
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }
    ```
  </Accordion>

  <Accordion title=".fern-accordion-trigger">
    展开/折叠触发器。

    ```css Default CSS
    .fern-accordion-trigger {
      display: flex;
      cursor: pointer;
      align-items: center;
      gap: 0.75rem;
      border-radius: inherit;
      padding: 1rem;
      transition-property: background-color;
      list-style: none;
      overflow: auto;
    }

    .fern-accordion-trigger:hover {
      background-color: var(--grayscale-a2);
      transition: none;
    }

    .fern-accordion-trigger[data-state="open"] {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .fern-accordion-trigger::-webkit-details-marker {
      display: none;
    }
    ```
  </Accordion>

  <Accordion title=".fern-accordion-trigger-arrow">
    展开/折叠箭头。

    ```css Default CSS
    .fern-accordion-trigger-arrow {
      color: var(--grayscale-a11);
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fern-accordion-trigger[data-state="open"] .fern-accordion-trigger-arrow {
      transform: rotate(90deg);
    }
    ```
  </Accordion>

  <Accordion title=".fern-accordion-trigger-title">
    手风琴触发器标题。

    ```css Default CSS
    .fern-accordion-trigger-title {
      color: var(--text-body);
      margin: 0;
      margin-bottom: -1px;
      display: flex;
      max-width: max-content;
      text-align: left;
      font-size: 1rem;
      line-height: 1.5rem;
    }

    .fern-accordion-trigger-title p {
      margin: 0 !important;
      padding: 0 !important;
      line-height: inherit !important;
    }
    ```
  </Accordion>
</AccordionGroup>

## 滚动区域组件

用于可滚动区域的选择器。

<AccordionGroup>
  <Accordion title=".fern-scroll-area">
    可滚动区域容器。

    ```css Default CSS
    .fern-scroll-area {
      z-index: 0;
      display: flex;
      height: 100%;
      width: 100%;
      flex-direction: column;
      overflow: hidden;
    }
    ```
  </Accordion>

  <Accordion title=".fern-scroll-area-viewport">
    滚动视口。

    ```css Default CSS
    .fern-scroll-area-viewport {
      display: flex;
      height: 100%;
      min-height: 0;
      width: 100%;
      flex-shrink: 1;
      flex-direction: column;
      border-radius: inherit;
    }

    .fern-scroll-area-viewport:has(.fern-scroll-area-scrollbar[data-orientation="horizontal"]) {
      overscroll-behavior-x: contain;
    }

    .fern-scroll-area-viewport > div {
      display: block !important;
      flex-grow: 1;
    }

    .fern-scroll-area-viewport[data-scrollbars="vertical"] > div {
      max-width: 100%;
    }
    ```
  </Accordion>

  <Accordion title=".fern-scroll-area-scrollbar">
    滚动条。

    ```css Default CSS
    .fern-scroll-area-scrollbar {
      z-index: 10;
      margin: 0.25rem;
      display: flex;
      touch-action: none;
      user-select: none;
      border-radius: 9999px;
      transition: all 150ms ease-out;
      background-color: var(--grayscale-a3);
    }

    .fern-scroll-area-scrollbar[data-state="hidden"] {
      opacity: 0;
    }

    .fern-scroll-area-scrollbar[data-orientation="vertical"] {
      margin-top: 5px;
      margin-bottom: 5px;
      width: 4px;
    }

    .fern-scroll-area-scrollbar[data-orientation="vertical"]:hover {
      width: 6px;
    }

    .fern-scroll-area-scrollbar[data-orientation="horizontal"] {
      margin-left: 5px;
      margin-right: 5px;
      height: 4px;
      flex-direction: column;
    }

    .fern-scroll-area-scrollbar[data-orientation="horizontal"]:hover {
      height: 6px;
    }
    ```
  </Accordion>

  <Accordion title=".fern-scroll-area-thumb">
    滚动条滑块。

    ```css Default CSS
    .fern-scroll-area-thumb {
      position: relative;
      z-index: auto;
      display: flex;
      background-color: var(--accent-track);
      flex: 1 1 0%;
      border-radius: 9999px;
    }

    .fern-scroll-area-thumb::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      min-width: 28px;
      min-height: 28px;
    }
    ```
  </Accordion>

  <Accordion title=".fern-scroll-area-corner">
    滚动条角落。

    ```css Default CSS
    .fern-scroll-area-corner {
      background-color: transparent;
    }
    ```
  </Accordion>
</AccordionGroup>

## 徽章组件

用于[徽章](/learn/docs/writing-content/components/badges)和 HTTP 方法标签的选择器。

<AccordionGroup>
  <Accordion title=".fern-docs-badge">
    用于标签、状态和 HTTP 方法的徽章。

    ```css Default CSS
    .fern-docs-badge {
      align-items: center;
      display: inline-flex;
      gap: 0.25rem;
      justify-content: center;
      line-height: 1rem;
      box-sizing: border-box;
      font-weight: 600;
      white-space: nowrap;
    }

    .fern-docs-badge.small {
      border-radius: var(--radius-1);
      font-size: 0.75rem;
      height: 1.25rem;
      padding: 0 0.375rem;
    }

    .fern-docs-badge.large {
      border-radius: var(--radius-3/2);
      font-size: 0.875rem;
      height: 1.5rem;
      padding: 0.25rem 0.5rem;
    }

    .fern-docs-badge.rounded {
      border-radius: 9999px !important;
    }

    .fern-docs-badge:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .fern-docs-badge[data-badge-type="http-method"],
    .fern-docs-badge[data-badge-type="status-code"] {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
      font-variant-numeric: slashed-zero;
      text-transform: uppercase;
    }
    ```
  </Accordion>
</AccordionGroup>

## MDX 内容组件

用于链接、提示框、步骤组件和表格的选择器。

<AccordionGroup>
  <Accordion title=".fern-mdx-link">
    带外部链接图标和悬停下划线的链接。

    ```css Default CSS
    .fern-mdx-link {
      color: var(--accent-a11);
      font-weight: 600;
      text-decoration-line: underline;
      text-decoration-color: currentcolor;
      text-decoration-thickness: 1px !important;
      text-underline-offset: 0.25rem;
    }

    .fern-mdx-link:hover {
      text-decoration-thickness: 2px !important;
    }

    .fern-mdx-link svg.external-link-icon {
      margin-left: 0.125rem;
      display: inline-block;
      width: 0.875rem;
      height: 0.875rem;
      color: currentColor;
      opacity: 0.7;
      overflow: visible;
    }

    .fern-mdx-link:hover svg.external-link-icon path:nth-child(1),
    .fern-mdx-link:hover svg.external-link-icon path:nth-child(2) {
      transform: translate(2px, -2px);
      transition: transform 0.2s ease;
    }
    ```
  </Accordion>

  <Accordion title=".fern-callout">
    [标注](/learn/docs/writing-content/components/callouts)，颜色与 intent 相匹配。

    ```css Default CSS
    .fern-callout {
      border-radius: var(--radius-3);
      margin-bottom: 1.5rem;
      margin-top: 1rem;
      border: 1px solid;
      padding: 1rem;
    }

    .fern-callout:first-child {
      margin-top: 0;
    }
    ```

    **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"]` - 绿色
  </Accordion>

  <Accordion title=".fern-indent">
    带垂直引导线的[缩进组件](/learn/docs/writing-content/components/indent)。

    ```css Default CSS
    .fern-indent {
      position: relative;
      margin-left: 1rem;
      padding-left: 1rem;
    }

    .fern-indent > * + * {
      margin-top: 0.25rem;
    }

    .fern-indent::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.5rem;
      bottom: 0.5rem;
      border-left: 1px solid transparent;
    }
    ```
  </Accordion>

  <Accordion title=".fern-steps">
    [步骤组件](/learn/docs/writing-content/components/steps)的容器。

    ```css Default CSS
    .fern-steps {
      border-left: 1px solid var(--border-default);
      margin-bottom: 3rem;
      margin-left: 0.75rem;
      margin-top: 1rem;
      padding-left: 1.75rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-step">
    单个[步骤](/learn/docs/writing-content/components/steps)。

    ```css Default CSS
    .fern-step > .fern-anchor {
      position: absolute;
      margin-left: -40px;
      margin-top: 0.25rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-anchor">
    用于深度链接的[锚点组件](/learn/docs/writing-content/components/anchor)。

    ```css Default CSS
    a.fern-anchor {
      border-radius: var(--radius-3/2);
      position: relative;
      display: flex;
      width: 1.5rem;
      height: 1.5rem;
      align-items: center;
      border: 0;
    }

    .fern-anchor-icon {
      border-radius: var(--radius-3/2);
      position: absolute;
      left: 0;
      display: flex;
      width: 1.5rem;
      height: 1.5rem;
      align-items: center;
      justify-content: center;
    }

    .fern-anchor-icon:not(.copied) {
      color: var(--grayscale-a11);
      background-color: var(--card-background);
      border: 1px solid var(--card-border);
      backdrop-filter: blur(8px);
    }

    .fern-anchor-icon.copied {
      background-color: var(--accent-a3);
      border: 1px solid var(--accent-a5);
      backdrop-filter: blur(8px);
    }

    .fern-anchor-icon.copied > svg {
      color: var(--accent-a11);
    }

    .fern-anchor-icon > svg {
      width: 1rem;
      height: 1rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-table-root">
    表格容器。

    ```css Default CSS
    .fern-table-root {
      border: 1px solid var(--card-border);
      border-radius: var(--radius-3/2);
      background-color: var(--card-background);
      overflow: hidden;
      font-size: 0.875rem;
      backdrop-filter: blur(32px);
      display: flex;
      flex-direction: column;
    }
    ```
  </Accordion>

  <Accordion title=".fern-table">
    支持 `.sticky` 类的表格，可启用[粘性表头](/learn/docs/writing-content/components/tables#sticky-tables)。

    ```css Default CSS
    .fern-table {
      width: 100%;
    }

    .fern-table thead tr th {
      background-color: var(--grayscale-a2);
    }

    .fern-table td,
    .fern-table th {
      height: 2.25rem;
      padding: 0.5rem;
      text-align: left;
      border-bottom: 1px solid var(--card-border);
    }

    .fern-table tbody > tr:last-child > td {
      border-bottom: 0;
    }

    .fern-table.sticky {
      font-size: 0.875rem;
    }

    .fern-table.sticky thead {
      position: sticky;
      top: var(--header-height, var(--spacing-header-height-real));
    }

    .fern-table.sticky thead tr th {
      background-color: var(--grayscale-2);
    }

    .fern-table.sticky td,
    .fern-table.sticky th {
      max-width: 0;
    }
    ```
  </Accordion>
</AccordionGroup>

## 变更日志筛选器组件

用于变更日志筛选 UI 的选择器。仅在带有标签的[变更日志页面](/learn/docs/configuration/changelogs)上出现。

<AccordionGroup>
  <Accordion title=".fern-filter-dropdown-button">
    筛选器下拉菜单触发按钮。

    ```css Default CSS
    .fern-filter-dropdown-button {
      /* Inherits from .fern-button with variant="outlined" */
    }
    ```

    ```css Example: Customize the filter button appearance
    /* Style the filter dropdown button */
    .fern-filter-dropdown-button {
      border-color: var(--accent-a7);
      background-color: var(--accent-a2);
    }

    .fern-filter-dropdown-button:hover {
      border-color: var(--accent-a9);
      background-color: var(--accent-a3);
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-dropdown-button-text">
    筛选器按钮文本。

    ```css Default CSS
    .fern-filter-dropdown-button-text {
      /* Inherits text styles from parent button */
    }
    ```

    ```css Example: Visually replace the default label text
    /* Replace "Select filters" with custom text using CSS */
    .fern-filter-dropdown-button-text {
      font-size: 0;
    }

    .fern-filter-dropdown-button-text::after {
      content: "Select product";
      font-size: 0.875rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-dropdown-button-icon">
    筛选器按钮的尖角图标。

    ```css Default CSS
    .fern-filter-dropdown-button-icon {
      width: 1rem;
      height: 1rem;
    }
    ```

    ```css Example: Customize the chevron icon
    /* Change the chevron color */
    .fern-filter-dropdown-button-icon {
      color: var(--accent-a11);
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-dropdown-item">
    筛选器下拉项。

    ```css Default CSS
    .fern-filter-dropdown-item {
      /* Inherits from .fern-dropdown-item */
    }
    ```

    ```css Example: Style filter dropdown items
    /* Customize filter dropdown items */
    .fern-filter-dropdown-item {
      padding: 0.5rem 0.75rem;
    }

    .fern-filter-dropdown-item[data-highlighted] {
      background-color: var(--accent-a4);
      color: var(--accent-a12);
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-badge">
    筛选徽章基类。

    ```css Default CSS
    .fern-filter-badge {
      display: inline;
      max-width: 100%;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-badge-selected">
    已选中的筛选徽章。

    ```css Default CSS
    .fern-filter-badge-selected {
      /* Inherits from .fern-docs-badge with variant="outlined" */
    }
    ```

    ```css Example: Style selected filter badges with your brand color
    /* Make selected badges use your accent color */
    .fern-filter-badge.fern-filter-badge-selected {
      background-color: var(--accent-a9);
      color: var(--accent-contrast);
      border-color: var(--accent-a9);
    }
    ```
  </Accordion>

  <Accordion title=".fern-filter-badge-unselected">
    未选中的筛选徽章。

    ```css Default CSS
    .fern-filter-badge-unselected {
      /* Inherits from .fern-docs-badge with variant="outlined-subtle" */
    }
    ```

    ```css Example: Mute unselected filter badges
    /* Style unselected badges with muted appearance */
    .fern-filter-badge.fern-filter-badge-unselected {
      background-color: transparent;
      color: var(--grayscale-a10);
      border-color: var(--grayscale-a6);
    }
    ```
  </Accordion>

  <Accordion title=".fern-dropdown-checkmark">
    筛选器下拉勾选标记。

    ```css Default CSS
    .fern-dropdown-checkmark {
      width: 1rem;
      height: 1rem;
    }
    ```

    ```css Example: Customize the checkmark color
    /* Change the checkmark color to match your brand */
    .fern-dropdown-checkmark {
      color: var(--accent-a11);
    }

    /* Or target only changelog filter checkmarks */
    .fern-filter-dropdown-item .fern-dropdown-checkmark {
      color: var(--accent-a11);
    }
    ```
  </Accordion>
</AccordionGroup>

## API Reference 组件

用于 [API Reference](/learn/docs/api-references/overview) 组件的选择器。

<AccordionGroup>
  <Accordion title=".fern-api-property">
    API 属性容器。

    ```css Default CSS
    .fern-api-property {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    .fern-api-property p:last-child {
      margin-bottom: 0;
    }
    ```
  </Accordion>

  <Accordion title=".fern-api-property-header">
    API 属性头部。

    ```css Default CSS
    .fern-api-property-header {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-api-property-key">
    API 属性名。

    ```css Default CSS
    .fern-api-property-key {
      color: var(--text-body);
      font-family: var(--font-mono);
      font-size: 0.875rem;
      font-weight: 600;
    }
    ```
  </Accordion>

  <Accordion title=".fern-api-property-meta">
    API 属性元数据（类型、是否必填）。

    ```css Default CSS
    .fern-api-property-meta {
      color: var(--grayscale-a11);
      display: inline-flex;
      align-items: baseline;
      gap: 0.5rem;
      font-size: 0.75rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-api-property-constraint">
    API 属性约束。

    ```css Default CSS
    .fern-api-property-constraint {
      display: inline-block;
      max-width: 100%;
      min-width: 0;
    }
    ```
  </Accordion>
</AccordionGroup>

## 工具组件

用于[图标](/learn/docs/writing-content/components/icons)、[工具提示](/learn/docs/writing-content/components/tooltips)和其他元素的选择器。

<AccordionGroup>
  <Accordion title=".fern-highlight">
    高亮文本。

    ```css Default CSS
    .fern-highlight {
      color: var(--accent-a12);
      background-color: transparent;
      font-weight: 700;
    }
    ```
  </Accordion>

  <Accordion title=".fern-mdx-icon">
    行内图标（自适应主题）。

    ```css Default CSS
    .fern-mdx-icon {
      color: var(--grayscale-a11);
      display: inline-block;
      vertical-align: baseline;
    }

    @variant dark {
      .fern-mdx-icon {
        color: var(--fa-icon-dark, var(--grayscale-a11));
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-mdx-tooltip-trigger">
    带下划线的工具提示触发器。

    ```css Default CSS
    .fern-mdx-tooltip-trigger {
      --tooltip-underline-color: var(--grayscale-a10);
      --tooltip-underline-hover-color: var(--grayscale-12);
      --tooltip-underline-thickness: 1px;
      --tooltip-underline-offset: 1px;
      --tooltip-transition-duration: 0.15s;

      display: inline-block;
      cursor: help;
      text-decoration: underline dashed var(--tooltip-underline-color) var(--tooltip-underline-thickness);
      text-underline-position: under;
      text-underline-offset: var(--tooltip-underline-offset);
      transition: text-decoration-color var(--tooltip-transition-duration) ease;
    }

    .fern-mdx-tooltip-trigger:hover {
      text-decoration-color: var(--tooltip-underline-hover-color);
    }
    ```
  </Accordion>

  <Accordion title=".fern-mdx-tooltip-content">
    工具提示内容。

    ```css Default CSS
    .fern-mdx-tooltip-content {
      --tooltip-padding-x: 0.75rem;

      padding-left: var(--tooltip-padding-x) !important;
      padding-right: var(--tooltip-padding-x) !important;
    }
    ```
  </Accordion>

  <Accordion title=".fern-file-icon">
    文件类型图标。

    ```css Default CSS
    .fern-selection-item-icon .fern-file-icon {
      display: block;
      height: 50%;
      width: 50%;
      transition: all 300ms ease-in-out;
    }

    .fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
      transform: scale(1.2);
    }
    ```
  </Accordion>

  <Accordion title=".fern-collapsible-child">
    可折叠子元素。

    ```css Default CSS
    .fern-collapsible[data-state="open"] .fern-collapsible-child {
      animation: slide-down 0.18s var(--ease-collapse) none;
      width: var(--radix-collapsible-content-width);
    }

    .fern-collapsible[data-state="closed"] .fern-collapsible-child {
      animation: slide-up 0.18s var(--ease-collapse) none;
      width: var(--radix-collapsible-content-width);
    }

    @keyframes slide-down {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(0);
      }
    }

    @keyframes slide-up {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-100%);
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-runnable-endpoint">
    [可运行端点](/learn/docs/writing-content/components/runnable-endpoint)。

    ```css Default CSS
    .fern-runnable-endpoint ul {
      padding-left: 0 !important;
      margin-top: 0 !important;
    }

    .fern-runnable-endpoint button {
      margin-top: 0 !important;
    }

    .fern-runnable-endpoint .fern-input:disabled,
    .fern-runnable-endpoint .fern-textarea:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

    .fern-runnable-endpoint .fern-input-group:has(.fern-input:disabled),
    .fern-runnable-endpoint .fern-textarea-group:has(.fern-textarea:disabled),
    .fern-runnable-endpoint .fern-numeric-input-group:has(.fern-input:disabled) {
      opacity: 0.6;
      cursor: not-allowed;
      background-color: var(--grayscale-a2);
      pointer-events: none;
    }
    ```
  </Accordion>

  <Accordion title=".fern-rss-feed-button">
    RSS 订阅按钮。

    ```css Default CSS
    .fern-rss-feed-button .fern-button-content {
      gap: 0.5rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-footer">
    文档页脚。

    ```css Default CSS
    .fern-layout-footer.not-prose {
      margin-top: 4rem !important;
    }
    ```
  </Accordion>

  <Accordion title=".fern-layout-footer-toolbar">
    页脚工具栏。

    ```css Default CSS
    .fern-layout-footer-toolbar {
      display: flex;
      gap: 1rem;
      justify-content: space-between;
    }

    @media (max-width: 640px) {
      .fern-layout-footer-toolbar {
        flex-direction: column;
        gap: 2rem;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-footer-nav">
    上一页/下一页导航。

    ```css Default CSS
    .fern-footer-nav {
      display: flex;
      background-color: var(--grayscale-a3);
      border-radius: var(--radius-4);
      padding: 0.25rem;
      margin-left: -0.25rem;
      margin-right: -0.25rem;
    }
    ```

    **变体：**

    * `.fern-footer-nav--simple` - 不带背景的简化导航样式
  </Accordion>

  <Accordion title=".fern-footer-prev">
    上一页链接。

    ```css Default CSS
    .fern-footer-prev {
      display: flex;
      height: 4rem;
      flex-shrink: 0;
      align-items: center;
      gap: 0.25rem;
      padding: 0.75rem;
      padding-right: 1.5rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-footer-next">
    下一页链接。

    ```css Default CSS
    .fern-footer-next {
      display: flex;
      position: relative;
      height: 4rem;
      min-width: 0;
      flex: 1 1 0%;
      flex-shrink: 1;
      align-items: center;
      justify-content: flex-end;
      gap: 1rem;
      overflow: clip;
      border: 1px solid var(--card-border);
      padding: 0.75rem;
      background-color: var(--card-solid);
      transition: all 0.15s;
    }

    .fern-footer-next:hover {
      border-color: var(--accent-a9);
    }
    ```
  </Accordion>
</AccordionGroup>

## 变更日志组件

用于[变更日志页面](/learn/docs/configuration/changelogs)的选择器。

<AccordionGroup>
  <Accordion title=".fern-changelog">
    变更日志页面容器。

    ```css Default CSS
    .fern-changelog {
      display: flex;
      justify-content: space-between;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    @media (min-width: 768px) {
      .fern-changelog {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }

    @media (min-width: 1024px) {
      .fern-changelog {
        padding-left: 2rem;
        padding-right: 2rem;
      }
    }

    .fern-changelog > main {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      max-width: 1024px;
      word-wrap: break-word;
    }
    ```

    **变体：**

    * `.full-width` - 全宽布局，日期显示于侧边栏
  </Accordion>

  <Accordion title=".fern-changelog-entry">
    变更日志条目。

    ```css Default CSS
    .fern-changelog-entry {
      display: flex;
      align-items: stretch;
    }

    .fern-changelog-entry:is(article) {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }

    @media (min-width: 1024px) {
      .fern-changelog-entry:is(article) {
        padding-top: 4rem;
        padding-bottom: 4rem;
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-changelog-date">
    变更日志日期。

    ```css Default CSS
    .fern-changelog-date {
      color: var(--grayscale-a11);
      font-size: 1rem;
      margin-bottom: 2rem;
    }

    @media (min-width: 1024px) {
      .fern-changelog.full-width .fern-changelog-entry > aside .fern-changelog-date {
        position: sticky;
        top: calc(var(--header-height) + 1rem);
      }
    }
    ```
  </Accordion>

  <Accordion title=".fern-changelog-content">
    变更日志内容区域。

    ```css Default CSS
    .fern-changelog-content {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      display: grid;
      width: 100%;
      max-width: var(--content-wide-width);
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    ```
  </Accordion>

  <Accordion title=".fern-changelog-label">
    变更日志条目标签。

    ```css Default CSS
    .fern-changelog-label {
      display: flex;
      width: 100%;
      flex-direction: row;
      gap: 0.5rem;
    }

    @media (min-width: 1280px) {
      .fern-changelog-label {
        flex-direction: column;
      }
    }
    ```
  </Accordion>
</AccordionGroup>