需为 input 添加 required/type/pattern 等约束并设置 placeholder，配合 :invalid:not(:placeholder-shown) 实现输入后实时样式变化，避免未交互时误标红。
怎么用
和
触发实时样式变化
浏览器原生表单验证的伪类在 Less 中能直接用，但很多人写完发现没反应——核心原因是没加
属性或忘了设置
/
等触发条件。
Less 里嵌套写法很干净，但必须确保 HTML 元素真正处于可验证状态：
必须有
、
或
等约束，否则
永远不会激活
如果用了
提交逻辑，又没加
，浏览器会在提交时强制校验并跳转，掩盖了实时交互效果
某些旧版 Safari 对
支持更好，但
在输入后立即生效，更适合实时反馈
示例：
为什么
和
要组合判断
单独用
会导致刚点进空输入框就标红——用户还没输，不该提前报错。关键是区分“未交互”和“已输入但错误”两种状态。
Less 嵌套中用
是最轻量的判断方式，它依赖 placeholder 存在且未被遮盖：
立即学习
“
前端免费学习笔记（深入）
”；
必须给
设置
属性，否则
永远为 false
Chrome/Firefox 支持良好，IE 完全不支持，如需兼容得 fallback 到 JS 控制 class
不要用
替代，它作用于父容器，无法精准反映当前输入是否出错
Less 嵌套里怎么避免
伪类选择器
权重爆炸
写深了容易生成像
这种高权重要求，覆盖不了组件库默认样式，或者被第三方 CSS 覆盖掉。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
控制权重的关键是「提前收口」：
别在最外层 class 下无限嵌套伪类，比如
—— 这种写法既难读又难调试
优先用属性选择器收束，例如
比
更明确、权重更可控
如果用了 CSS-in-JS 或 Shadow DOM，伪类可能失效，这时得靠 JS 添加
类替代
自定义验证失败提示要不要用
伪元素
可以，但要注意伪元素不能响应点击或聚焦，也不能读屏——对无障碍不友好。而且
里没法插 HTML，纯文本提示能力有限。
更稳妥的做法是配合
和真实 DOM 节点：
Less 中用
控制兄弟节点显隐，比伪元素更可控
如果坚持用
，
只能是字符串或 attr()，比如
，但 IE 不支持 attr() 用于
伪元素定位依赖父元素
，漏写就会飘到页面左上角
验证交互真正的复杂点不在样式嵌套，而在「什么时候该显示错误」——用户删光内容后，是保持红框？还是等再次失焦才清掉？这个时机得由业务逻辑定，Less 只负责承接状态。
:valid:invalidnovalidaterequiredtypeinputrequiredtype="email"pattern:invalidformnovalidate:user-invalid:invalid.form-control {
border: 1px solid #ccc;
&:valid {
border-color: #28a745;
}
&:invalid:not(:placeholder-shown) {
border-color: #dc3545;
}
}&:focus&:invalid:invalid:not(:placeholder-shown)inputplaceholder:placeholder-shown:focus-within.form .group input:focus:invalid.form-control:hover:focus:invalid:requiredinput[required]:invalid.form-control:invalidis-invalid::aftercontentaria-live&:invalid:not(:placeholder-shown) + .error-message::aftercontentattr(data-error)contentposition: relative