CSS 无法通过 [value*="xxx"] 实时匹配用户输入值，因 value 属性不随输入更新；需用 JS 监听 input 事件动态添加 class 或设置 data- 属性，再配合 CSS；伪类 :placeholder-shown 和 :focus-within 更轻量可靠。
用 [value*="xxx"] 匹配输入框当前值含特定文字
浏览器原生不支持基于 value 属性实时内容的 CSS 选择（因为 value 属性只反映初始值，用户输入后 DOM 属性不变），所以 [value*="xxx"] 只在输入框未被操作、或通过 JS 显式设置过 value 属性时才生效。常见错误是写好选择器却完全不触发样式——其实是 DOM 属性没更新。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若需响应用户输入，必须配合 JS：监听
input事件，动态给元素添加 class（如has-text-foo），再用.has-text-foo写样式 - 若只是初始化匹配（比如表单回填后想高亮含“test”的字段），确保 JS 已执行
el.setAttribute('value', newValue)，而非仅改el.value - 注意兼容性：
[value*="xxx"]在所有现代浏览器都可用，但 IE8 及更早版本不支持属性包含匹配（*）
[placeholder^="请输入"] 做前缀匹配要小心 placeholder 动态变化
用 [placeholder^="请输入"] 能精准选中 placeholder 以指定文字开头的 <input>，但前提是 placeholder 文本是硬编码在 HTML 里，或由 JS 静态设置过 placeholder 属性。如果用 JS 改的是 el.placeholder（属性值），那没问题；但如果只改了 el.setAttribute('placeholder', ...)，也 OK；但若框架（如 Vue/React）用 prop 控制且未同步到 DOM 属性，则选择器失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查元素是否真有
placeholder属性：右键「检查」→ 查看 Elements 面板中该标签是否有placeholder="..."字样，而不是只看渲染出的提示文字 - 前缀匹配（
^=）对空格和大小写敏感，[placeholder^="请输入"]不会匹配placeholder=" 请输入"或placeholder="请输入邮箱"（后者其实会匹配，但前者因开头空格不匹配） - 避免用
[placeholder*="邮箱"]这类模糊匹配——容易误中其他 placeholder 含“邮箱”二字的输入框
用 data-* 属性替代 value/placeholder 匹配更可靠
绕过原生属性的不可靠性，最稳的方式是让 JS 主动写入语义化 data- 属性。比如用户输入后，判断是否含“admin”，就设 data-has-admin="true"，CSS 直接写 input[data-has-admin="true"]。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要把业务逻辑塞进 class 名（如
class="input-admin"），而用data-属性承载状态，语义清晰且不影响样式命名空间 - 多个条件可叠加：
data-role="search" data-state="dirty" data-has-value="true"，CSS 中用input[data-role="search"][data-has-value="true"]组合筛选 - 注意性能：频繁修改
data-属性不会触发重排，但若每次input事件都读写，建议加节流（如requestIdleCallback或简单setTimeout延迟）
伪类 :placeholder-shown 和 :focus-within 是更轻量的交互替代方案
很多场景其实不需要“匹配文字”，而是想表达“当前 placeholder 可见”或“输入框已获得焦点且有内容”。这时用伪类比属性选择器更直接、无需 JS 干预、且天然响应状态变化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
input:placeholder-shown表示 placeholder 正在显示（即输入框为空且未聚焦，或聚焦但未输入）；它不依赖任何属性，纯靠浏览器渲染状态 -
input:focus-within适合包裹容器（如<label></label>），当内部 input 获焦时整个 label 变色，比监听 focus/blur 更简洁 - 注意兼容性：
:placeholder-shown在 Safari 9+、Chrome 47+、Firefox 51+ 支持；:focus-within在 Safari 15.4+ 才完整支持，旧版 Safari 需降级处理
事情说清了就结束。真正难的不是写对选择器，而是分清哪些状态 CSS 能感知、哪些必须 JS 接手——混淆这两者，样式就总在“该生效时不生效”。
