本文详解如何通过 css 类控制实现 fetch 请求过程中的加载状态展示，重点解决因选择器权重或类名匹配错误导致的加载动画不显示问题，并提供完整可运行的代码示例与最佳实践。
在使用 fetch 发起异步请求时，常需向用户反馈“正在加载”状态——典型做法是显示一个旋转加载动画（preloader）。但许多开发者会遇到：明明调用了 showLoad()，页面却始终看不到加载元素。问题往往不出在 JavaScript 逻辑本身，而在于 CSS 类名作用机制与选择器优先级。
回顾原始代码，关键问题出在以下 CSS 规则：
#load.display {
display: block;
}
该规则要求元素同时具备 ID load 和类 display 才生效。但 HTML 中
并未预设任何类，而 JS 中仅通过 loader.classList.add(‘display’) 添加了类名。表面看逻辑成立，实则存在隐性风险：若 .display 类被其他更具体的选择器（如 #load.display）覆盖，或浏览器解析时因 ID 选择器优先级高但匹配失败导致样式未生效，则 display: block 将不会应用。
✅ 正确解法是解除对 ID 的强耦合，改用纯类选择器：
.display {
display: block !important; /* 推荐加 !important 防止被意外覆盖 */
}
同时确保 HTML 中的 loader 元素结构清晰、可访问：
