合并多个CSS伪类失效：表单输入框样式未达预期原因排查

你的CSS代码未达预期的核心问题是**:empty伪类无法判断输入框的内容是否为空**：

• <input>是自闭合元素，它的DOM结构里没有子节点，不管用户有没有输入内容，这个元素永远符合:empty的判定，所以not(:empty)条件始终为真，导致选择器逻辑完全偏离预期。

修正方案 #

方案1：用:placeholder-shown替代:empty #

:placeholder-shown伪类会判断输入框的占位符是否可见——当用户输入内容后，占位符消失，该伪类就不再生效。需要给输入框添加占位符（哪怕是空占位符）：

CSS代码：

input:not(:focus):valid:not(:placeholder-shown) {
    border: 1.5px solid rgb(21, 215, 31);
}

对应的HTML（需包含placeholder属性）：

<input type="email" placeholder=" " required>

方案2：结合required属性简化逻辑 #

如果你的输入框是必填项（带有required属性），:valid伪类本身就隐含了“内容非空且符合验证规则”的条件，此时可以直接去掉not(:empty)：

CSS代码：

input:not(:focus):valid {
    border: 1.5px solid rgb(21, 215, 31);
}

对应的HTML（需包含required属性）：

<input type="email" required>

内容的提问来源于stack exchange，提问作者tareq albeesh