能，但必须用 :invalid:not(:placeholder-shown) 组合；因为 :invalid 仅在值已填但不合规时触发，placeholder 显示时 :invalid 不匹配，导致 :has(input:invalid) 失效。
能，但必须用 :invalid:not(:placeholder-shown) 组合，且不能依赖 JS 或 class 切换。 直接写 .field:has(input:invalid) 会误触发——placeholder 还在时，浏览器认为输入值为空，:invalid 不匹配，错误状态就漏掉了。
为什么 :has(input:invalid) 常常不生效
表单元素在有 required、pattern 等约束时，:invalid 只在“值已填写但不符合规则”时才激活。如果用户还没输、只看到 placeholder，:invalid 为 false，:has() 就找不到匹配项，整行高亮和错误提示都不会出现。
解决办法是排除 placeholder 干扰：
-
:invalid:not(:placeholder-shown)才代表“真出错了”，这是关键组合 - 确保
input有required或pattern属性，否则:invalid永远不触发 - 不要给
input设value=""，否则:placeholder-shown不会生效
.field:has(input:invalid:not(:placeholder-shown)) 的实际写法
这个选择器要搭配容器结构使用，比如每个表单项是这样的 HTML：
<div class="field"> <label>邮箱</label> <input type="email" required placeholder="name@example.com"><div class="error">请输入有效邮箱</div> </div>
对应 CSS：
.field {
padding: 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.field:has(input:invalid:not(:placeholder-shown)) {
border-color: #dc2626;
}
.field:has(input:invalid:not(:placeholder-shown)) .error {
display: block;
}
注意点：
-
.error初始必须是display: none，否则无法被:has()控制显隐 - 别用
visibility: hidden或opacity: 0替代，它们不改变布局，但:has()无法感知“视觉隐藏” - Chrome 105+ 才默认支持，Firefox 需开启
layout.css.has-selector.enabled，Safari 当前（2026年9月）仍不支持
聚焦态与错误态共存时的样式冲突
如果同时写 .field:has(input:focus) 和 .field:has(input:invalid:not(:placeholder-shown))，后者权重相同，后声明的会覆盖前者边框色。你得手动合并逻辑：
.field:has(input:focus) {
border-color: #2563eb;
background: #f8fafc;
}
.field:has(input:invalid:not(:placeholder-shown)) {
border-color: #dc2626;
background: #fef2f2;
}
/* 错误且聚焦时，优先显示错误 */
.field:has(input:focus:invalid:not(:placeholder-shown)) {
border-color: #dc2626;
background: #fef2f2;
}
这里用了链式伪类 input:focus:invalid:not(:placeholder-shown)，比单独两个 :has() 更精确，也避免样式打架。
真正难的不是写对这行 CSS，而是记住 :placeholder-shown 不是可选修饰，它是把 :invalid 从“空值假错”里捞出来的唯一筛子。漏掉它，整个机制就静默失效，连 DevTools 里都看不出问题在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
