使用组件作用域 CSS 控制规则应用于哪些元素，并使用共享样式表在多个页面间复用规则。对于 Mac 上的小型 HTML 项目，两者可以结合使用；根据需要移动和维护的内容来选择文件安排。

本指南将带你为一个本地页面设置样式，该页面包含一张圆角方形卡片和一条单独的备注。目标是让卡片的外观保持可预测，然后决定将其 CSS 放在页面内还是放入可复用文件中。标签和形状均为虚构示例，无需框架或下载素材。

实际上要做什么选择？

这里有两个决定：CSS 放在哪里，以及它会选中哪些元素。嵌入式样式表位于 HTML 文档的 style 元素中。外部样式表是通过 link 附加的独立资源，使用 rel="stylesheet" 和一个 href 路径。这些是 HTML 提供 CSS 的机制；无论采用哪种安排，普通选择器都不会自动获得组件边界。HTML 标准：style 元素，MDN：外部资源链接元素。

原生 CSS @scope 会添加选择边界。你可以指定一个根元素，然后编写只在该子树内应用的规则。当周围文档包含相似元素时，它可以让简短的选择器继续发挥作用。Chrome 的文档还区分了原生作用域与通过生成的类或属性重写选择器的工具。如果组件示例依赖这类工具，就必须额外具备这些工具。使用 CSS @scope at 规则限制选择器的作用范围。

对于这个任务，请使用以下决策参考。这是根据文档所述机制给出的编辑建议，并非浏览器要求。

当前任务 建议的安排 需要随它一起移动的内容
将一个小页面保留为单个文件 在 style 元素中嵌入 CSS HTML，以及任何单独引用的素材
在多个页面中维护相同的卡片 使用带有专用组件类的外部样式表 每个 HTML 页面和共享 CSS
在指定子树中使用较短的选择器 添加显式根节点的 @scope 规则，可嵌入也可外置 CSS 和包含匹配根节点的标记
需要支持作用域支持情况不确定的浏览器 将必要样式保留在普通类规则中 HTML 和包含这些规则的样式表

因此，“可移植”需要有具体含义。单个 HTML 文件方便单独移动。包含 HTML 和 CSS 的文件夹同样可以移植，前提是路径仍能正确解析。可复用组件还需要第三种可移植性：目标位置必须保留选择器所依赖的标记钩子。

在 Mac 上构建一个可用的双文件示例

创建一个名为 form-study 的文件夹。在其中保存两个纯文本文件，分别命名为 index.html 和 shared.css。如果使用 TextEdit，请选择 文件 > 新建，然后在粘贴代码前选择 格式 > 制作为纯文本。对于 HTML 文件，Apple 文档说明应使用 .html 扩展名保存，并在出现提示时选择 使用 .html。确认样式表的实际文件名为 shared.css，没有附加 .txt 后缀。在 Mac 上使用 TextEdit 处理 HTML 文稿。

将以下完整 HTML 文档保存为 index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

将以下完整样式表保存为 shared.css：

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

在 Safari 或其他桌面浏览器中打开 index.html。预期结果是一张带边框的白色卡片，卡片上有一个蓝色圆角方形，后面跟着一条无边框的备注。样式表连接方式遵循 MDN 记录的模式：HTML 通过样式表链接上的 href 指定 CSS 资源。MDN：引入样式表。

此示例特意为卡片标题设置了独立的类。这样无需原生作用域，也能清楚呈现预期的样式关系。页面背景和字体属于文档默认样式；卡片边框、标题颜色和形状则属于卡片。提取可复用规则时，请保留这一区别：目标页面可能需要这张卡片，但不想采用本页面的背景或宽度。

要共享这种设计，请在同一文件夹中创建第二个 HTML 页面，并使用相同的样式表链接。这样两个页面都会引用同一个 CSS 文件。请将对此文件的编辑视为对所有链接到它的页面的更改；修改共享规则后，逐一检查每个页面。

原生作用域 CSS 何时有用？

当组件包含多个适合使用简单局部选择器的元素时，可以使用 @scope，尤其是在需要为嵌套内容设置明确下边界时。CSS 级联与继承规范通过一个根节点和可选的限制元素来定义作用域。根节点包含在作用域内；限制元素及其后代不会被作用域规则匹配。该规范目前是工作草案。CSS 级联与继承第 6 级：作用域样式。

若要进行小型实验，可将以下可选片段追加到 shared.css。它使用现有示例标记，并更改卡片段落的外观：

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

在支持该功能的浏览器中，卡片内的段落会获得浅色背景和内边距。备注段落位于该规则的作用域之外。CSS 仍放在共享文件中：作用域和共享可以同时使用。

如果之后添加一个类名为 nested-sample 的嵌套区域，可以用以下片段替换上述可选片段。这是一个边界示例；原始页面目前还没有这样的嵌套区域。

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

限制元素会将嵌套区域排除在这些选择器的匹配范围之外。但这不会实现完全的样式隔离：color 和 font-family 等继承属性仍可能越过作用域限制继续传递。诊断嵌套元素为何仍与其父元素相似时，请记住这一区别。MDN：@scope 说明。

像 .shape-card 这样的显式根节点，在 CSS 移动到其他文件时也能清楚表明依赖关系。目标文档必须包含带有该类的元素。仅移动样式表无法提供所需标记。

浏览器支持有哪些限制？

MDN 目前将 @scope 标记为 Baseline 2026，表示自 2026 年 3 月起，最新版本的各大浏览器均已支持。较旧的浏览器可能不支持。Mac 就在你桌上，并不能说明已安装的浏览器支持哪些 CSS 功能；请根据兼容性信息检查你计划使用的浏览器版本。MDN：@scope 浏览器兼容性。

如果需要兼顾较旧浏览器，请将必要的卡片样式保留在上面的普通类规则中。这样，可选的作用域段落样式就可以作为增强效果。CSS 错误处理允许浏览器丢弃不受支持的内容，同时继续处理有效 CSS，因此样式表存在并不代表其中每条规则都生效。MDN：CSS 错误处理。

若要在不使用 @scope 的情况下实现相同的段落样式，可为卡片段落指定一个专用类，例如 shape-card__caption，然后在普通规则中选择该类。这样会增加一个标记钩子，但实现效果时无需依赖原生作用域。

不要在 style 元素上添加 scoped 属性并期待相同的行为。当前 HTML 标准中该元素的属性列表不包含此属性。原生 CSS 作用域使用 @scope 规则。HTML 标准：style 元素，MDN：@scope 语法。

如何保持页面可移植？

对于此示例，移动整个 form-study 文件夹可以保留 index.html 和 shared.css 之间的关系。只移动 HTML 文件会让样式表留在原处。交接或重新整理编写的页面前，请先确认以下简单的依赖约定：

  1. 标记： 保留组件类以及选择器所需的结构。
  2. 样式表： 包含 CSS 文件，并让 HTML 链接继续指向它的位置。
  3. 资源： 包含 CSS 引用的所有文件，并保留或更新其路径。
  4. 浏览器： 为将打开页面的浏览器版本保留受支持的样式实现方式。

当组件增加字体或装饰性文件时，第三项检查就很重要。MDN 文档指出，相对 CSS URL 会根据样式表 URL 解析。因此，将声明移到另一个文件夹中的样式表可能会改变它们指向的资源位置。MDN：url() CSS 函数。

例如，如果外部样式表从项目文件夹移到 styles 子文件夹，那么直接引用 url("assets/tile.png") 的声明现在会指向 styles/assets 内的位置。请更新路径，或保留相应的目录结构。此可用示例通过完全使用 CSS 绘制形状，避免了这类依赖。

如果优先考虑单文件交接，可将提供的 CSS 嵌入文档 head 内的 style 元素，并删除样式表链接。这样，此示例只需要 HTML 文件。保留相同的选择器，包括任何可选的显式根节点 @scope 块。HTML 支持通过 style 元素嵌入样式表。HTML 标准：style 元素。

通过移动并重新加载来检查选择

将整个项目文件夹复制到另一个位置，然后在浏览器中打开复制后的 HTML。在副本中，更改 shared.css 中形状的背景颜色，保存并重新加载页面。可见的变化可以确认你编辑的是复制页面所使用的样式表。

接下来检查卡片和备注。成功的结果应保留卡片样式，同时让备注位于可选的作用域段落规则之外。如果整个页面都失去了样式，请先检查 CSS 文件名和链接路径。如果只有可选样式缺失，请检查浏览器支持情况和作用域根节点。如果无关元素发生变化，请检查是否有选择器超出预期组件范围。

在 TextEdit 中重新打开 HTML 时，请使用 文件 > 打开，然后选择 显示选项 和 忽略富文本命令，以便查看源代码。Apple 还记录了一个设置 将 HTML 文件显示为 HTML 代码，而非格式化文本，可供以后打开文件时使用。在 Mac 上使用 TextEdit 处理 HTML 文稿。

如果主要任务是将这个小页面放在一起，请选择嵌入式 CSS。如果多个页面应使用同一套维护中的规则，请选择共享样式表。在其边界能简化规则且浏览器支持的情况下，再添加原生作用域。最后，实际移动并重新打开文件：这能检查所选安排依赖的标记、样式表和资源关系。

来源