water.css“失效”是因为它只作用于语义化html标签（如、），不支持套等非语义结构，且不重置样式、不接管自定义类名。
Water.css 为什么一引入就“失效”？
不是 Water.css 有问题，而是它默认只对语义化 HTML 标签生效（<h1></h1>～<h6></h6>、<p></p>、<ul></ul>、<button></button> 等），如果你页面里全是 <div> 套 <code><div>，它就真的一点反应都没有。
<ul>
<li>检查是否误把 Water.css 当成“万能重置+美化”工具——它不重置，也不接管自定义类名</li>
<li>确保 HTML 结构用了原生语义标签，比如用 <code><button></button> 而不是 <div class="btn">
<li>别在 <code> 里用 defer 或 async 加载 Water.css，它需要同步应用样式
!important 的自定义 CSS，会直接覆盖 Water.css 的规则，优先级更高怎么让 Water.css 和自己的 class 共存不打架？
Water.css 的设计哲学是“零配置、无侵入”，所以它所有选择器都**不带 class 或 id**，只靠元素名和简单伪类（如 :hover、:focus）。这意味着你只要不用 !important，自己的类样式天然优先级更高。
- 想局部覆盖 Water.css？直接写
.my-card { border: 2px solid #333; }就行，不用加!important - 想禁用某类默认样式？比如去掉所有
<input>的圆角，可以补一句input { border-radius: 0 !important; }（仅限必要场景） - 避免用
[class]这类通配选择器去重置，它会意外干掉 Water.css 的基础渲染逻辑
Water.css 在现代浏览器里有没有兼容性雷区？
它本身只依赖 CSS Custom Properties（CSS 变量）和 :focus-visible，所以 IE 完全不支持，Edge 79+、Chrome 84+、Firefox 75+ 都没问题。但有个容易被忽略的点：CSS 变量未定义时的 fallback 行为。
- 如果你在
:root里覆盖了--color-primary，但拼错了变量名（比如写成--color-prime），Water.css 不会报错，只是回退到内置值，视觉可能突兀 - 深色模式下，Water.css 依赖
@media (prefers-color-scheme: dark)，但某些安卓 WebView 不触发该媒体查询，导致始终亮色——可手动加data-theme="dark"并配合 JS 检测 - 字体渲染上，它用的是系统默认字体栈（
system-ui, sans-serif），在 Windows 上可能比 macOS 显得稍“毛”，无需调整，这是预期行为
要不要在生产环境用 Water.css？
可以，但得清楚它解决什么问题：快速给纯 HTML 页面加一层体面、一致、无障碍友好的基础样式，不是替代 Tailwind 或 Bootstrap。
立即学习“前端免费学习笔记（深入）”；
- 体积小（gzip 后约 4KB），CDN 引入快，适合文档页、登录页、错误页这类静态单页
- 没有 JS 依赖，不怕 CSP 限制，也不影响 Lighthouse 的 performance 分数
- 别指望它做响应式栅格或复杂组件（如折叠菜单、分页器），那些仍需自己写或引入其他方案
- 如果项目已有 SCSS/Less 构建流程，直接 import Water.css 的源码（
@import "water.css/src/water.css";）比 CDN 更可控
真正难的不是引入，是克制——别一边用 Water.css，一边又写一堆 div { margin: 0; padding: 0; } 去“修复”它。它没 bug，只是假设你愿意写语义 HTML。
