CSS中不存在:shown伪类，::placeholder仅用于样式化占位符文本；检测“未填写”应结合required属性、:user-invalid伪类及JavaScript校验。
placeholder 伪类不支持 :shown，根本不存在这个选择器
CSS 里没有 :shown 这个伪类，更不存在 ::placeholder:shown 这种写法。浏览器完全忽略它，写了也没效果。placeholder 文本的显示/隐藏由表单控件自身控制（比如 有值时自动隐藏），CSS 无法监听“是否正在显示”这个状态。
::placeholder 只能样式化占位文字本身
::placeholder 是一个伪元素，仅用于设置 placeholder 文本的样式（颜色、字体、透明度等），它不反映输入状态，也不触发重绘逻辑。常见误用是想靠它“检测未填写”，但这是 JavaScript 才能做的事。
- 支持的写法：
::placeholder、::-webkit-input-placeholder、::-moz-placeholder（兼容性需按需加前缀） - 不支持状态判断：不能和
:focus、:valid、:empty等组合出“未填时高亮边框”这类逻辑 - 透明度可调但无意义：设
opacity: 0.3可以让占位符变淡，但这和“是否已填”无关
真正检测“未填写”的推荐做法是结合 :invalid 和 :user-invalid
原生 HTML 表单验证机制才是可靠方案。给 加 required 属性后，浏览器会在提交前标记为空字段为 :invalid；用户交互后（如失焦），还会触发 :user-invalid，更适合做实时提示。
input:invalid:not(:placeholder-shown) {
border-color: #d32f2f;
}
input:user-invalid {
border-color: #d32f2f;
}
input:valid {
border-color: #4caf50;
}
-
:placeholder-shown是真实存在的伪类，表示 placeholder 正在显示（即输入框为空且没聚焦）——但它不是“未填写”的充分条件（比如用户输空格后 placeholder 隐藏，但实际仍为空） - 优先用
:user-invalid，它比:invalid更精准：只在用户操作过且验证失败时生效，避免页面刚加载就红边 - 注意
type="number"或type="email"等类型会额外触发格式校验，可能掩盖空值判断
需要动态提示文案？必须用 JavaScript 监听 input 或 blur
CSS 无法插入或切换提示文字（比如在输入框下方显示“请填写邮箱”）。这类交互必须靠 JS 控制 DOM 或 class：
立即学习“前端免费学习笔记（深入）”；
const emailInput = document.querySelector('input[type="email"]');
const hintEl = document.querySelector('.hint');
emailInput.addEventListener('blur', () => {
if (!emailInput.value.trim()) {
hintEl.textContent = '请填写邮箱';
hintEl.classList.add('error');
} else if (!emailInput.checkValidity()) {
hintEl.textContent = '邮箱格式不正确';
hintEl.classList.add('error');
} else {
hintEl.textContent = '';
hintEl.classList.remove('error');
}
});
- 别只监听
input事件：用户可能粘贴后立刻提交，blur 更稳妥 - 用
checkValidity()而非正则手动校验，复用浏览器内置逻辑 - 清空提示时务必移除 error class，否则样式残留
