> ## 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.

# 自定义 CSS

> 添加自定义 CSS，在内置设计设置之外进一步微调你的 Aftersell Cart。

当内置的[设计设置](/zh/aftersell/cart/design-settings)无法满足需求时，可以添加你自己的**自定义 CSS** 来为购物车设置样式。

<div id="where-to-add-it">
  ## 在哪里添加
</div>

在购物车编辑器中，打开 **Cart settings → Custom CSS**。你的 CSS **应用于整个购物车**，并在购物车的基础样式**之后**加载，因此你的规则具有更高优先级。

<div id="target-public-classes-only">
  ## 只针对公共类名
</div>

请使用购物车的**公共 `cart-external-*` 类名**来设置样式。编辑器会自动补全这些类名，并对其他类名发出警告：

* **`cart-external-*`**：公共的、受支持的目标。请使用这些。它们本身不携带任何样式，纯粹是为你的 CSS 提供挂载点。
* **`cart-internal-*`**：购物车自身的内部结构，其所有内置样式都在这里。编辑器会将针对它们的选择器标记为错误。由于所有现有购物车都依赖它们，它们不会被随意变动，但它们属于购物车可自行更改的部分，而不是对你的承诺。请改用对应的 `cart-external-*` 类名来调整样式。
* 编辑器无法识别的其他 `cart-*` 类名会被标记为警告。

<Note>
  你会在标记中看到 `cart-internal-*` 类名，包括每个区块的默认[自定义模板](/zh/aftersell/cart/custom-templates)中。这是正常的：它们正是区块内置外观的来源。这里的规则针对的是你在此面板中**编写的选择器**，而不是购物车渲染的类名。

  如果你正在编写会更改区块 DOM 结构的自定义模板，请参阅[为自定义模板设置样式](/zh/aftersell/cart/custom-templates#styling-a-custom-template)，了解哪些类名应保留、哪些应去掉。
</Note>

<div id="shadow-dom-the-cart-is-self-contained">
  ## Shadow DOM：购物车是自包含的
</div>

在店面上，整个购物车在其自己的 **shadow DOM** 中渲染。这意味着：

* 你主题的 CSS 无法渗入购物车，购物车的 CSS 也不会泄漏到外部，因此你的自定义 CSS 自动限定在购物车范围内，不会与网站的其他部分冲突。
* 你的选择器应引用**购物车内部**的元素和类名。针对购物车之外页面元素的选择器无法作用到内部。

同样的边界也适用于 JavaScript：`document.querySelector` 也无法看到抽屉内部。要访问购物车元素的脚本必须通过 [`shadowRoot`](/zh/aftersell/cart/sdk-overview#shadowroot)，并且同样以这些 `cart-external-*` 类名为目标。

<div id="when-to-use-design-settings-instead">
  ## 何时改用设计设置
</div>

对于颜色、圆角、间距和宽度，内置的[设计设置](/zh/aftersell/cart/design-settings)更简单、更安全，因此只有在它们无法覆盖的情况下才使用自定义 CSS。

<div id="where-to-go-next">
  ## 下一步
</div>

* **[设计设置](/zh/aftersell/cart/design-settings)**：内置的样式控件，也是首先应该尝试的。
* **[自定义模板](/zh/aftersell/cart/custom-templates)**：当仅靠 CSS 无法实现时，完全替换区块的标记。
* **[Cart SDK](/zh/aftersell/cart/sdk-overview)**：用于行为而非外观。