用 CSS ::has(input:valid) 可实现无 JS 的实时密码强度校验：将强密码拆分为长度、大写字母、数字、特殊字符四条独立规则，每条对应一个隐藏 input 并设 pattern，通过 :has() 控制图标显隐，主密码框用轻量 JS 同步值，兼容性不足时可降级为 JS 切换 class。
用 CSS 伪类 ::has(input:valid) 配合多条独立校验规则，就能在用户输入过程中实时点亮对应提示图标——不用写一行 JavaScript 监听事件。
拆解密码规则为独立可测的 CSS 选择器
把“强密码”拆成几条互不干扰的子规则，每条规则对应一个带 pattern 的隐藏 input（或复用 visible input），再用 CSS 判断其是否 valid。例如：
- 长度 ≥ 8 位 →
<input type="password" pattern=".{8,}" id="pwd-len"> - 含大写字母 →
<input type="password" pattern=".*[A-Z].*" id="pwd-upper"> - 含数字 →
<input type="password" pattern=".*[0-9].*" id="pwd-digit"> - 含特殊字符 →
<input type="password" pattern=".*[!@#$%^&*()_+-=[]{};':"\|,./?].*" id="pwd-spec">
这些 input 全部设为 hidden 或 position: absolute; left: -9999px，不影响布局，但参与表单验证逻辑。
用 ::has 精准控制每个图标的显隐
每个提示图标（比如 SVG 或 span）放在对应规则的容器里，用 ::has(input:valid) 控制状态。例如：
立即学习“前端免费学习笔记（深入）”；
<span class="icon-check">✓</span>
<span class="rule-text">至少 8 位</span>
<input type="password" pattern=".{8,}" id="pwd-len" hidden>
</div>
CSS 写法：
.rule-item .icon-check { opacity: 0.4; }.rule-item:has(#pwd-len:valid) .icon-check { opacity: 1; color: #2ecc71; }
每条规则独立生效，用户输对某一项，对应图标立刻变亮，无需 JS 判断组合逻辑。
主密码框同步触发所有隐藏校验
让所有隐藏 input 的 value 始终和主密码框保持一致。只需一段轻量 JS：
const mainPwd = document.getElementById('password');const pwdInputs = document.querySelectorAll('[id^="pwd-"]');
mainPwd.addEventListener('input', () => {
pwdInputs.forEach(el => el.value = mainPwd.value);
});
这样所有 pattern 校验会随输入自动重跑，::has 也随之更新，视觉反馈完全实时、解耦、可维护。
兼容性与降级处理
::has 目前在 Chrome 105+、Firefox 121+、Safari 15.4+ 支持良好。若需兼容旧浏览器，可 fallback 到监听 input + toggleClass 方式，但核心思路不变：把每条规则映射为一个可被 CSS 捕捉的状态源，图标只是它的视觉投影。
