class 和 data-test 是最稳定、易维护的锚点方案。class 用于标记状态（如 is-loading），语义清晰、可叠加、不耦合样式；data-test 属性专供自动化定位，不随 ui 改版失效，避免 nth-child 等脆弱选择器。
直接用 class 控制状态，配合 data-* 属性做自动化锚点，是最稳、最易维护的路径。硬写 nth-child 或依赖动态生成的 ID，90% 的项目半年后就挂。
为什么 class 是状态切换的首选载体
状态本质是“组件当前在做什么”，比如 is-loading、is-disabled、is-expanded 这类 class 名，语义清晰、可叠加、不耦合样式实现。前端框架（React/Vue）渲染时可能重排 DOM 或复用节点，但只要 JS 显式增删这些 class，CSS 就能稳定响应。
- 多个状态可共存：
button.is-disabled.is-loading同时生效，无需额外逻辑 - 避免样式污染：不像
:hover或:focus依赖用户行为，class完全由业务逻辑驱动 - 自动化测试友好：Selenium/Playwright 可直接断言
element.hasAttribute("class", "is-loading")
data-test 属性才是自动化定位的黄金标准
靠 .btn-primary 定位按钮？UI 改版一换 class 名，所有脚本全崩。真正可靠的是和前端约定统一的 data-test 属性，例如 data-test="submit-button" 或 data-test="menu-toggle"。
- 它不参与样式，只服务于自动化，前端改样式不影响测试脚本
- CSS 中可用
[data-test="login-form"]精准选中，比#login-form更安全（ID 可能被 SSR/SSG 动态生成） - 支持模糊匹配：
[data-test^="nav-"]匹配所有导航类组件，[data-test*="modal"]捕获模态框相关元素
避免 nth-child 和层级选择器踩坑
div > ul > li:nth-child(2) 这类选择器在真实项目里就是定时炸弹。列表排序、条件渲染、懒加载都可能让第 2 个 li 突然消失或移位。
- 真实 DOM 结构常变，但组件状态和
data-test不变 —— 锚点必须绑在不变的东西上 - 如果必须用层级，优先用语义化父容器 + 状态 class：
.user-list .user-item.is-active，而非索引 - Shadow DOM 或 Web Components 内部，
nth-child根本不可见，data-test是唯一穿透方式
伪类和 :has() 要慎用，尤其在自动化中
:hover、:focus 在 UI 自动化里基本无效（无真实鼠标/键盘事件），而 :has() 虽强大，但浏览器兼容性差（Chrome 105+、Firefox 117+），且 Selenium 目前不支持 —— Playwright 支持但需显式启用。
- 别指望
button:has(.spinner)在 CI 环境里稳定工作，CI 浏览器版本往往滞后 - 用 JS 主动设置
is-loadingclass，比等 CSS 推导更可控 - 真要用
:has()，只限开发环境调试，生产自动化脚本里一律回避
状态不是靠猜出来的，是靠明确标记出来的。class 和 data-test 是你唯一能信任的契约 —— 其他所有路径，都是临时拼凑的应急方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
