> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Upcart CSS 选择器库（V2）

> 本文列出 Upcart 版本 2 中可用的 CSS 选择器，旨在为更新后的 cart drawer 和模块结构提供自定义样式支持。

⚠️ **重要提示**

这些选择器**仅适用于 Upcart 购物车模块的版本 2（V2）**。如果你使用的是**版本 1（V1）**，这些选择器将不起作用。

对于 V1 购物车，请参阅\*\*[版本 1 CSS 选择器文档](/zh/upcart/upcart_css_selector_library_v1)\*\*，其中涵盖旧版模块结构和选择器。

要检查你使用的版本，请打开 Cart Editor 并查看左侧菜单顶部。当购物车中的每个模块都升级到 V2 后，那里会出现 **Cart version** 下拉菜单；如果你没有看到它，说明你的购物车仍有 V1 模块。有关从 V1 迁移到 V2 的更多信息，请参阅 [V2.0 迁移指南](/zh/upcart/upcart_v20_migration_guide)。

<div id="overview">
  # 概览
</div>

如果你想更改购物车的外观，例如隐藏价格、调整文本大小或重新定位按钮，这里就是起点。这个 CSS 选择器库提供了使用自定义代码进行这些更改所需的工具。

本文汇总了所有可用的 CSS 选择器，并附有编写和测试样式的实用资源链接。

<div id="note">
  ## 注意
</div>

虽然我们提供此库以方便你使用，但 Upcart 支持团队**无法协助构建或修复自定义代码。** 这是我们[自定义政策](/zh/upcart/upcart_customization_policy)的一部分。

我们建议咨询 Shopify 专家以获取自定义代码解决方案。

[查看 Shopify 专家](https://www.shopify.com/ca/partners/directory)

##

<div id="how-to-use-upcart-css-selectors">
  # 如何使用 Upcart CSS 选择器
</div>

本文是一个可用于设置和自定义 Upcart cart drawer 样式的 **CSS 选择器库**。每个选择器都针对购物车的特定部分——例如头部、产品行、upsell、奖励模块等。

你可以使用这些选择器来：

* 隐藏元素或重新设计其样式
* 更改间距、字体或颜色
* 根据商店的品牌形象调整布局

要应用你的 CSS，请打开 Cart Editor，前往 **Settings**，选择 **Custom CSS** 选项卡，然后将样式粘贴到编辑器中。

<div id="what-to-know-before-adding-css">
  # 添加 CSS 前须知
</div>

在开始编写自定义样式之前，这里有一些帮助你顺利进行的提示。它们能让你更轻松地测试更改、避免意外，并在不破坏购物车任何功能的情况下获得想要的外观。

<div id="css-customization-checklist">
  ## CSS 自定义检查清单：
</div>

* **在安全环境中测试：** 上线前尽可能使用预览或未发布的主题。

* **从小处着手：** 一次只做一个更改，这样更容易追踪哪些有效、哪些无效。

* **将样式粘贴到正确的位置：** 使用 **Upcart Editor > Settings > Custom CSS** 字段添加代码。

* **使用检查工具：** 在浏览器中右键点击元素并选择 **Inspect**（检查），以实时查找和测试选择器。

* **避免想当然：** 并非所有元素都会出现在所有购物车中——请使用不同的购物车（有/无奖励、upsell 等）进行测试。

以下选择器适用于 Upcart 购物车模块的版本 2。V2 引入了带有 **public** 和 **internal** 类名前缀的结构化命名系统。

<div id="important-guidelines-for-v2-selectors">
  ## **V2 选择器的重要准则**
</div>

⚠️ **仅使用 public 选择器进行自定义**

* **Public 选择器**（以 `upcart-public-` 为前缀）属于稳定 API 的一部分，可安全用于自定义样式
* **Internal 选择器**（以 `upcart-internal-` 为前缀）保留供内部使用，可能随时更改，恕不另行通知

✅ **应该：** 使用 public 类名来设置样式

```
/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}
```

❌ **不应该：** 覆盖 internal 类名或使用深层选择器

```
/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}
```

#

<div id="css-selectors">
  # CSS 选择器
</div>

<div id="general-components">
  ### **通用组件**
</div>

|                                                          |                   |
| -------------------------------------------------------- | ----------------- |
| **CSS 选择器**                                              | **说明**            |
| `.upcart-public-skeleton`                                | 购物车的通用骨架加载器包裹层。   |
| `.upcart-public-component__button`                       | 各模块通用的按钮组件。       |
| `.upcart-public-component-loader`                        | 加载中旋转图标组件。        |
| `.upcart-public-component-tag`                           | 标签组件包裹层。          |
| `.upcart-public-component-tag__icon`                     | 标签内的图标。           |
| `.upcart-public-component-tag__text`                     | 标签的文本内容。          |
| `.upcart-public-component-tag__remove-button`            | 可移除标签内的移除（"x"）按钮。 |
| `.upcart-public-component-collapse__dropdown-container`  | 可折叠下拉部分的容器。       |
| `.upcart-public-component-collapse__expand-icon`         | 指示展开/折叠状态的图标。     |
| `.upcart-public-component-carousel__container`           | 轮播的外层包裹层。         |
| `.upcart-public-component-carousel__window`              | 幻灯片滚动所在的裁剪窗口。     |
| `.upcart-public-component-carousel__track`               | 承载幻灯片的移动轨道。       |
| `.upcart-public-component-carousel__slide`               | 单个轮播幻灯片。          |
| `.upcart-public-component-carousel__button`              | 上一个/下一个箭头按钮。      |
| `.upcart-public-component-progress-bar`                  | 普通（无分段）进度条组件。     |
| `.upcart-public-component-progress-bar__track`           | 普通进度条的轨道。         |
| `.upcart-public-component-progress-bar__fill`            | 普通进度条的已填充部分。      |
| `.upcart-public-component-progress-bar__milestone`       | 普通进度条上的里程碑标记。     |
| `.upcart-public-component-progress-bar__milestone-icon`  | 普通进度条里程碑处的图标。     |
| `.upcart-public-component-progress-bar__milestone-label` | 普通进度条里程碑处的标签。     |

#

<div id="header-module">
  ### **头部模块**
</div>

|                                            |                       |
| ------------------------------------------ | --------------------- |
| **CSS 选择器**                                | **说明**                |
| `.upcart-public-header`                    | 购物车头部的主容器。            |
| `.upcart-public-header__logo`              | 购物车头部的标志图片。           |
| `.upcart-public-header__close-button`      | 用于关闭 cart drawer 的按钮。 |
| `.upcart-public-header__close-button-icon` | 关闭按钮内显示的图标。           |

<div id="announcements-module">
  ### **公告模块**
</div>

|                                        |               |
| -------------------------------------- | ------------- |
| **CSS 选择器**                            | **说明**        |
| `.upcart-public-announcement`          | 购物车内的横幅或公告部分。 |
| `.upcart-public-announcement-skeleton` | 公告栏的骨架加载器。    |

<div id="recommendation-and-upsell-modules">
  ### **推荐和 Upsell 模块**
</div>

|                                                          |                          |
| -------------------------------------------------------- | ------------------------ |
| **CSS 选择器**                                              | **说明**                   |
| `.upcart-public-upsell`                                  | upsell 模块的主包裹层。          |
| `.upcart-public-upsell__header`                          | upsell 部分的头部。            |
| `.upcart-public-upsell__title`                           | upsell 部分的标题文本。          |
| `.upcart-public-upsell__shop-now-button`                 | upsell 商品上的 Shop Now 按钮。 |
| `.upcart-public-upsell__vertical-layout-wrapper`         | 垂直 upsell 布局的包裹层。        |
| `.upcart-public-component-upsell-tile`                   | 每个 upsell/推荐产品的卡片布局。     |
| `.upcart-public-component-upsell-tile__image-container`  | upsell 产品图片的容器。          |
| `.upcart-public-component-upsell-tile__image`            | upsell 产品的图片。            |
| `.upcart-public-component-upsell-tile__info`             | upsell 卡片的信息区域。          |
| `.upcart-public-component-upsell-tile__title-link`       | 产品标题的链接包裹层。              |
| `.upcart-public-component-upsell-tile__title`            | upsell 产品的标题。            |
| `.upcart-public-component-upsell-tile__rating-row`       | 包含产品评分的行。                |
| `.upcart-public-component-upsell-tile__stars`            | 星级评分显示。                  |
| `.upcart-public-component-upsell-tile__star--partial`    | 小数评分的部分星星。               |
| `.upcart-public-component-upsell-tile__reviews`          | 评价数量显示。                  |
| `.upcart-public-component-upsell-tile__price-row`        | 包含价格信息的行。                |
| `.upcart-public-component-upsell-tile__price-compare-at` | upsell 的原价（划线价）。         |
| `.upcart-public-component-upsell-tile__price`            | upsell 商品的当前价格。          |
| `.upcart-public-component-upsell-tile__variant-row`      | 包含款式选择的行。                |
| `.upcart-public-upsell__skeleton`                        | upsell 模块的骨架占位符。         |
| `.upcart-public-upsell__skeleton-title`                  | upsell 部分标题的骨架。          |
| `.upcart-public-upsell__skeleton-image`                  | upsell 产品图片的骨架。          |
| `.upcart-public-upsell__skeleton-product-title`          | upsell 产品标题的骨架。          |
| `.upcart-public-upsell__skeleton-product-price`          | upsell 产品价格的骨架。          |

<div id="notes-module">
  ### **备注模块**
</div>

|                                        |                     |
| -------------------------------------- | ------------------- |
| **CSS 选择器**                            | **说明**              |
| `.upcart-public-notes`                 | 备注部分的主容器。           |
| `.upcart-public-notes__text-container` | 备注文本区域的容器。          |
| `.upcart-public-notes__textarea`       | 为购物车添加自定义备注的文本输入区域。 |

<div id="discount-code-module">
  ### **折扣码模块**
</div>

|                                                 |               |
| ----------------------------------------------- | ------------- |
| **CSS 选择器**                                     | **说明**        |
| `.upcart-public-discount-code`                  | 折扣码部分的主容器。    |
| `.upcart-public-discount-code__form`            | 折扣码输入的表单包裹层。  |
| `.upcart-public-discount-code__input-wrapper`   | 折扣码输入字段的包裹层。  |
| `.upcart-public-discount-code__input`           | 输入折扣码的输入字段。   |
| `.upcart-public-discount-code__suffix`          | 输入字段的后缀元素。    |
| `.upcart-public-discount-code__error`           | 无效折扣码的错误消息显示。 |
| `.upcart-public-discount-code__button`          | 应用折扣码的按钮。     |
| `.upcart-public-discount-code__skeleton`        | 折扣码模块的骨架占位符。  |
| `.upcart-public-discount-code__skeleton-input`  | 折扣码输入字段的骨架。   |
| `.upcart-public-discount-code__skeleton-button` | 折扣码应用按钮的骨架。   |

<div id="trust-badges-module">
  ### **信任徽章模块**
</div>

|                                      |               |
| ------------------------------------ | ------------- |
| **CSS 选择器**                          | **说明**        |
| `.upcart-public-trust-badges`        | 信任徽章的容器。      |
| `.upcart-public-trust-badges__image` | 信任徽章中使用的图片元素。 |

<div id="tiered-rewards-module">
  ### **阶梯奖励模块**
</div>

|                                                                                  |               |
| -------------------------------------------------------------------------------- | ------------- |
| **CSS 选择器**                                                                      | **说明**        |
| `.upcart-public-rewards`                                                         | 奖励部分的主容器。     |
| `.upcart-public-rewards__message`                                                | 显示与奖励相关的进度消息。 |
| `.upcart-public-rewards__bar`                                                    | 奖励进度条的容器。     |
| `.upcart-public-component-segmented-progress-bar`                                | 分段进度条组件。      |
| `.upcart-public-component-segmented-progress-bar__segments-container`            | 所有进度条分段的容器。   |
| `.upcart-public-component-segmented-progress-bar__segment`                       | 进度条的单个分段。     |
| `.upcart-public-component-segmented-progress-bar__segment-fill`                  | 进度条分段的填充部分。   |
| `.upcart-public-component-segmented-progress-bar__milestone`                     | 进度条上的里程碑标记。   |
| `.upcart-public-component-segmented-progress-bar__milestone--bottom`             | 位于底部的里程碑。     |
| `.upcart-public-component-segmented-progress-bar__milestone--top`                | 位于顶部的里程碑。     |
| `.upcart-public-component-segmented-progress-bar__milestone--middle`             | 位于中间的里程碑。     |
| `.upcart-public-component-segmented-progress-bar__milestone-icon`                | 里程碑处显示的图标。    |
| `.upcart-public-component-segmented-progress-bar__milestone-label`               | 里程碑的标签文本。     |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-right`  | 右对齐的里程碑标签。    |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-center` | 居中对齐的里程碑标签。   |
| `.upcart-public-rewards__skeleton`                                               | 奖励部分的骨架容器。    |
| `.upcart-public-rewards__skeleton-message`                                       | 奖励进度消息的骨架。    |
| `.upcart-public-rewards__skeleton-bar`                                           | 奖励进度条的骨架。     |

<div id="cart-items-module">
  ### **购物车商品模块**
</div>

|                                                                   |                |
| ----------------------------------------------------------------- | -------------- |
| **CSS 选择器**                                                       | **说明**         |
| `.upcart-public-cart-items`                                       | 购物车商品列表的主包裹层。  |
| `.upcart-public-cart-item`                                        | 单个购物车商品的包裹层。   |
| `.upcart-public-cart-items-skeleton__content`                     | 购物车商品的骨架加载器。   |
| `.upcart-public-component-product-tile`                           | 购物车中单个产品项的包裹层。 |
| `.upcart-public-component-product-tile__content`                  | 产品卡片的内容区域。     |
| `.upcart-public-component-product-tile__image-wrapper`            | 产品图片的包裹层。      |
| `.upcart-public-component-product-tile__image`                    | 购物车中产品的图片。     |
| `.upcart-public-component-product-tile__info`                     | 产品卡片的信息区域。     |
| `.upcart-public-component-product-tile__header`                   | 产品卡片的头部区域。     |
| `.upcart-public-component-product-tile__product-title`            | 购物车中产品的名称。     |
| `.upcart-public-component-product-tile__title-link`               | 包裹产品标题的链接。     |
| `.upcart-public-component-product-tile__remove-button`            | 从购物车中移除产品的按钮。  |
| `.upcart-public-component-product-tile__variant`                  | 款式信息显示。        |
| `.upcart-public-component-product-tile__properties`               | 产品附加元数据的包裹层。   |
| `.upcart-public-component-product-tile__bundle`                   | 捆绑信息区域。        |
| `.upcart-public-component-product-tile__product-pricing`          | 产品卡片的价格区域。     |
| `.upcart-public-component-product-tile__price-compare-at`         | 原价（划线价）。       |
| `.upcart-public-component-product-tile__price`                    | 向客户显示的最终价格。    |
| `.upcart-public-component-product-tile__price-group`              | 价格和原价对比价格的包裹层。 |
| `.upcart-public-component-product-tile__savings`                  | 购物车商品的具体节省金额。  |
| `.upcart-public-component-product-tile__controls`                 | 控件区域（数量等）。     |
| `.upcart-public-component-product-tile__quantity-selector`        | 数量选择器包裹层。      |
| `.upcart-public-component-product-tile__quantity-minus`           | 减少数量的按钮。       |
| `.upcart-public-component-product-tile__quantity-plus`            | 增加数量的按钮。       |
| `.upcart-public-component-product-tile__discount-codes`           | 应用于该商品的折扣码。    |
| `.upcart-public-component-product-tile__subscription-upgrade`     | 订阅升级区域。        |
| `.upcart-public-component-product-tile__subscription-upgrade-btn` | 应用订阅升级的按钮。     |
| `.upcart-public-component-product-tile__select-wrapper`           | 选择下拉菜单的包裹层。    |
| `.upcart-public-component-product-tile__select`                   | 选择下拉菜单元素。      |
| `.upcart-public-product-properties__subscription`                 | 显示商品的订阅详情。     |
| `.upcart-public-product-properties__item`                         | 单个产品属性。        |
| `.upcart-public-product-properties__link`                         | 产品属性内的链接。      |
| `.upcart-public-cart-items__key-value-pair`                       | 商品属性的键值对显示。    |
| `.upcart-public-bundle-properties`                                | 捆绑属性的容器。       |
| `.upcart-public-bundle-properties__variant-title`                 | 捆绑商品的款式标题。     |
| `.upcart-public-bundle-properties__header`                        | 捆绑属性区域的头部。     |
| `.upcart-public-bundle-properties__item-components`               | 捆绑商品组件的容器。     |
| `.upcart-public-bundle-properties__item-component-row`            | 每个捆绑商品组件的行。    |
| `.upcart-public-bundle-properties__image-wrapper`                 | 捆绑商品图片的包裹层。    |
| `.upcart-public-bundle-properties__content`                       | 捆绑商品的内容区域。     |
| `.upcart-public-bundle-properties__product-title`                 | 捆绑商品的产品标题。     |

<div id="add-ons-module">
  ### **附加项目模块**
</div>

|                                                |                 |
| ---------------------------------------------- | --------------- |
| **CSS 选择器**                                    | **说明**          |
| `.upcart-public-addons`                        | 附加项目部分的主容器。     |
| `.upcart-public-addons__image-wrapper`         | 附加项目图片的包裹层。     |
| `.upcart-public-addons__content-wrapper`       | 附加项目信息的内容包裹层。   |
| `.upcart-public-addons__content-title-wrapper` | 附加项目标题的包裹层。     |
| `.upcart-public-addons__content-title`         | 附加产品的标题。        |
| `.upcart-public-addons__content-price`         | 附加项目的价格区域。      |
| `.upcart-public-addons__compare-at-price`      | 附加产品的原价（划线价）。   |
| `.upcart-public-addons__price`                 | 附加产品的当前价格。      |
| `.upcart-public-addons__content-description`   | 附加产品的描述。        |
| `.upcart-public-addons__toggle-wrapper`        | 附加项目切换开关的包裹层。   |
| `.upcart-public-addons__toggle`                | 添加/移除附加项目的切换开关。 |
| `.upcart-public-addons__toggle-switch`         | 切换开关的开关元素。      |
| `.upcart-public-addons__toggle-slider`         | 切换开关的滑块元素。      |
| `.upcart-public-addons__skeleton`              | 附加项目部分的骨架占位符。   |
| `.upcart-public-addons__skeleton-image`        | 附加产品图片的骨架。      |
| `.upcart-public-addons__skeleton-text`         | 附加项目中文本内容的骨架。   |

<div id="express-payments-module">
  ### **快捷支付模块**
</div>

|                                              |            |
| -------------------------------------------- | ---------- |
| **CSS 选择器**                                  | **说明**     |
| `.upcart-public-express-payments__container` | 快捷支付按钮的容器。 |

<div id="cart-summary-module">
  ### **购物车摘要模块**
</div>

|                                               |            |
| --------------------------------------------- | ---------- |
| **CSS 选择器**                                   | **说明**     |
| `.upcart-public-cart-summary`                 | 购物车摘要的主容器。 |
| `.upcart-public-cart-summary__discount-codes` | 摘要中折扣码的容器。 |
| `.upcart-public-cart-summary__discount-label` | 折扣部分的标签。   |
| `.upcart-public-cart-summary__slide-codes`    | 折扣码的滑动容器。  |
| `.upcart-public-cart-summary__total-discount` | 折扣总额显示。    |

<div id="helpful-resources-to-get-started">
  ## **入门实用资源：**
</div>

* **[自定义 CSS 入门](/zh/upcart/custom_css)：** 了解如何在 Upcart 中安全地添加自定义 CSS。
* **[Upcart 自定义简介](/zh/upcart/getting_started_with_upcart_customizations)：** 了解自定义的工作原理以及从何开始。
* **[使用 AI 为 Upcart 编写自定义代码](/zh/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings)：** 通过简单的提示词获得编写 CSS 或 JavaScript 的帮助。
* **[提升购物车转化率的最佳实践](/zh/upcart/best_practices_to_increase_upcart_conversions)：** 使用经过验证的技巧优化你的购物车设计。

##

##