原生CSS无法覆盖Flutter Widget样式，仅对显式创建的DOM元素生效；必须在web/index.html的<head>中通过<link>引入，路径需相对于web/目录，且仅作用于HtmlElementView等原生DOM组件。
原生 CSS 无法“覆盖” Flutter Widget 的样式，只能作用于你显式创建的 DOM 元素；真正要生效，必须走 web/index.html 中的 <link>，且路径、作用域、选择器都得对。
必须在 web/index.html 的 <head> 里加 <link>
这是唯一可靠入口。Flutter Web 最终运行在浏览器中，web/index.html 是 document 根节点，只有在这里注入的 CSS 才能进入浏览器原生样式表队列。
-
href路径必须相对于web/目录：文件放在web/css/app.css，就写href="css/app.css" -
href="assets/css/app.css"或href="/assets/css/app.css"必然 404 ——assets/是 Dart asset bundle 路径，不暴露为 HTTP 服务 - 不要用
@import、JS 动态插入<link>或eval注入，会引发 FOUC 或与 Flutter 渲染竞争 DOM 控制权 -
pubspec.yaml不需要声明该 CSS 文件 —— 它不走 Flutter 构建流程，由浏览器直接 HTTP 加载
CSS 只对 DOM 元素生效，不作用于普通 Widget
默认 CanvasKit 渲染下，Container、Text 等 Widget 不生成标准 DOM 节点，所以你写的 .my-card { background: red } 根本选不到它们。
- 能生效的场景：你用了
HtmlElementView、DivElement、IFrameElement等封装的原生 DOM 组件 - 选择器必须匹配你手动设置的 DOM class：比如
DivElement()..className = "my-player"，对应 CSS 写div.my-player，不能写.shrink-wrap-render-box（那是 Flutter 内部 class，不稳定） - 全局定义安全可用：
:root { --primary: #2196F3; }、* { margin: 0; }、字体声明等，后续可通过 JS 桥接读取变量值
调试时 90% 的问题出在路径或作用域上
打开 Chrome DevTools → Network 标签页，确认 CSS 请求返回 200；再切到 Elements 面板，检查目标 DOM 元素的 Computed Styles，看规则是否被命中或被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 404 常见原因：文件没放进
web/、路径大小写错误（macOS/Linux 区分）、IDE 缓存未刷新 - 样式无效果？先确认你选的是 DOM 元素，不是 Flutter Widget；再确认 class 名拼写和层级是否一致
- 被覆盖？Flutter 默认注入的
<style>标签或 inline style 权重可能更高，临时加!important仅用于验证，长期应提升选择器 specificity（如用div.my-widget p替代p）
最易被忽略的一点：CSS 和 Flutter 渲染是两套体系，不存在“覆盖 Widget 样式”这回事；所谓“覆盖”，其实是你主动把 DOM 元素交出去让 CSS 管，而 Widget 仍走自己的渲染逻辑 —— 混用时务必分清边界。
