:invalid一加载就标红空字段是因required字段初始为空被判定非法，属规范行为；需配合placeholder和:not(:placeholder-shown)实现“已输入且错误”才提示，而非依赖js。
纯 CSS 的 :invalid 伪类能自动标记校验失败，但直接用会一加载就标红空字段——这不是错误，是未交互。必须配合约束属性、:placeholder-shown 或状态类才能做到「用户输错才提示」。
为什么 :invalid 一打开页面就触发红边框
因为 required 字段初始为空，浏览器判定为非法值，:invalid 立即生效。这不是 bug，是规范行为。
- 必须给
input设置placeholder属性，否则:not(:placeholder-shown)永远不成立 -
:invalid:not(:placeholder-shown)是最轻量的“已输入但错误”判断方式，不依赖 JS - 旧版 Safari 对
:user-invalid更友好，但它只在 Chrome 102+ / Firefox 119+ / Safari 16.4+ 支持，不能当默认方案 - 如果用了
form默认提交逻辑，又没加novalidate，浏览器会在 submit 时强制校验并跳转，掩盖实时反馈效果
Less 嵌套中 &:focus:invalid 为什么无效
Less 编译时把 &:focus:invalid 当作顶层伪类处理，生成 :focus:invalid（无元素名），浏览器直接忽略。
- 正确写法必须挂载在具体选择器下：
input { &:focus:invalid { border-color: #dc3545; } } - 别在 mixin 外层或变量块里直接写
&:hover——&没有绑定目标，编译后失焦 - 如果写成
.form-group input { &:focus:invalid { ... } }，最终是.form-group input:focus:invalid，层级加深，容易被组件库样式覆盖 - 想统一控制多个控件，用属性选择器收束更稳：
input[required]:invalid比.form-control:invalid权重明确、意图清晰
用 Less when 守卫做状态分支是否可行
不可行。when 是编译期守卫，只根据变量值生成静态 CSS，无法响应用户输入、焦点或验证状态变化。
-
.form-control(@status: normal) when (@status = "error") { ... }只能在编译时决定输出哪套规则，不能随表单实时变化 - 若想按 JS 控制的
is-invalid类切换样式，直接写.form-control.is-invalid { ... }即可，无需守卫 - 守卫适合构建主题变体（如
@theme: "dark"）或尺寸配置（@size: "lg"），不适合运行时状态 - 误把
when当 if 用，会导致样式完全不出现——没匹配到任何守卫且没提供兜底定义时，mixin 不输出任何 CSS
真正关键的不是怎么写 Less，而是 HTML 是否带校验属性、placeholder 是否存在、以及是否理解 :invalid 的触发时机。伪类本身不校验，它只反映浏览器内置校验的结果；而这个结果，取决于你有没有给 input 加 required、type="email" 或 pattern。漏掉任意一个，:invalid 就永远不会激活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
