CSS

## 任务目标

任务：Vue 跨组件样式污染与弹层遮挡定位。基于所提供工程和业务证据完成检查，先读取可访问的工程与证据，可以推进的部分继续完成；仅对查证后仍影响结论的关键缺口提问；不要编造文件、日志、测量结果或已完成的操作。

以核查和评审为主，给出有证据的判断及可复核的修改建议；本次用户另有明确实现要求时，按其授权范围执行。

## 输入信息（选填）

两项均可留空，也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表；能读取的内容由执行者补齐。

样式异常：优先复现对话或截图中的污染、遮挡现象；现象未描述时检查当前页面路由往返后的样式变化，以及弹窗、下拉和提示层的裁切与叠放。
页面或样式资料：从当前工程查页面组件、全局样式、组件库配置和实际浏览器页面；有运行条件时自行读取计算样式与挂载结构。

## 信息不完整时

先使用本次对话中已经说明的信息；用户留空、写“暂无／不清楚”或未替换输入标记，都按缺失处理，不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问，不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料，不为补齐输入擅自扩大操作范围。

### 优先确认

- 确定最短复现路径，比较直接进入、路由切换、返回后的异常元素。
- 从计算样式反查胜出规则、加载顺序、继承、scoped 转换及深度选择器。
- 检查弹层挂载点、overflow 裁切和层叠上下文，区分层级问题与父级裁切。

### 可采用的默认处理

- 默认定位根因并给最小修改片段，不直接批量改 CSS；明确要求修复时才落地对应局部变更。
- 保留既有缩进、颜色语法和适配策略，优先收紧作用域或使用公开主题能力，不先堆叠 !important 和 z-index。
- 没有浏览器计算样式时把静态选择器冲突列为候选原因，不凭截图断定命中规则。

### 必须有依据的事项

- 多个样式行为都可能符合现有实现，但业务要求的弹层优先级或交互可达区域彼此冲突，不能自行选定新的交互规则。

只有缺口会改变业务结果、权限边界或关键实现，且无法从现有资料确认时，才集中提出最多 3 个关键问题；说明影响，并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定，不逐项等待确认。

### 资料仍不足时的交付

- 仅有源码时交付可疑选择器、层叠上下文和裁切点清单，附逐项浏览器取证步骤。
- 仅有截图时描述可见缺陷、可能的布局约束和同元素回归条件，不伪造样式来源。

## 执行要求

检查 Vue 页面及组件样式，保留项目既有的缩进、现代颜色语法和浏览器适配策略。文末 FEX 资料为未定稿草案，核验提交来自 2018 年；使用其中建议时须核对当前 Vue、组件库和浏览器的实际行为。

重点检查选择器复杂度、缩写属性覆盖、!important 和视觉层级管理。以当前项目的样式生效结果确定修改方式，不机械沿用旧示例。

1. 先复现一条最短路径，记录初次进入、切换路由、再次返回的差异，标出发生异常的元素和业务影响；截图只能说明外观，不能据此猜定是哪条选择器生效。
2. 从浏览器计算样式反查命中的规则、来源文件、加载顺序、继承关系及被覆盖值，区分组件库默认样式、全局样式、scoped转换和行内样式，保留可定位的证据。
3. 检查过宽选择器、相同类名、深度选择器及第三方内部类覆盖，找出影响范围超出业务组件的声明；缩写属性要核对是否顺带重置了原本只想保留的方向或字体设置。
4. 对弹窗、下拉和提示层单独分析实际挂载位置与层叠上下文，区分被父容器裁切和层级较低；不要在未确认原因前反复增大z-index或叠加!important。
5. 提出一处根因对应一项最小修改，例如收紧作用范围、取消重复覆盖、使用组件公开主题能力或调整挂载位置；涉及组件库内部结构时注明升级维护成本。
6. 复核直接访问和路由来回切换，覆盖多个同类组件、弹层叠加、长中文、滚动及目标窄屏；记录修改前后同一元素的生效规则，验证相邻页面没有被连带改变。

## 交付与验收

输出：给出复现路径、样式来源表、根因与证据、最小修改片段及受影响页面回归表。样式来源表包含元素、属性、最终值、胜出规则、来源位置与覆盖原因；不得将视觉截图通过等同于业务交互通过。

### 本条完成检查

- 输出元素、属性、最终值、胜出规则、来源和覆盖原因，根因与建议一一对应。
- 复核同元素的前后规则、直接访问及路由往返，覆盖相邻页面和多弹层叠加。
- 分别记录视觉与点击、焦点、滚动验收，不能以截图正常替代交互通过。

按本条要求组织结果，使用简洁中文和一致的编号、术语、缩进及空行；已有项目格式优先。只说明实际完成的内容，将采用的假设、未完成项和缺少的条件写在相关位置，不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注，不宣称已通过或已有性能收益。

## 参考资料与适用边界

来源核验日期：2026-09-08。
- 百度 FEX《CSS 编码规范（公开草案）》：https://github.com/fex-team/styleguide/blob/b1bc701d1c92220d0eb90e88ed4ccdc3d5c979dc/css.md

验证说明：已核对上述公开来源及具体规则或能力；本模板尚未通过模型对比实验或线上业务实测，不能以来源品牌、仓库热度或扫描分数代替验收。

来源许可说明：CC-BY-4.0（仓库 LICENSE.txt）。本条为中文原创整理，来源内容与本模板补充要求已在正文区分。