jQuery选择placeholder属性input元素失效问题咨询

让我来帮你拆解下前两个选择器失效的问题，其实都是容易忽略的小细节：

1. 第一个选择器：拼写错误导致匹配失败 #

你写的选择器是：

$('#divId input[plcaeholder="Email"]')

这里的属性名plcaeholder拼写错误了，正确的HTML属性名是placeholder（少写了一个字母h）。因为属性名不匹配，jQuery找不到对应的input元素，所以样式自然不会生效。

2. 第二个选择器：语法错误+伪类使用错误 #

你写的选择器是：

$('#divId input:placeholder]')

这里有两个明显的问题：

• 语法错误：末尾多了一个多余的]，这会直接导致选择器解析失败，浏览器无法识别这个选择器；
• 伪类错误：CSS标准里并没有:placeholder这个伪类。如果你的需求是选择所有带有placeholder属性的input，应该使用属性选择器[placeholder]；如果是想选择当前正在显示placeholder文本的input，则需要用:placeholder-shown伪类。

3. 第三个选择器：语法正确，所以正常生效 #

$('#divId input:required')使用了标准的CSS伪类:required，这个伪类专门用来匹配带有required属性的表单元素，语法和逻辑都没问题，所以能成功选中目标元素并设置样式。

修正后的代码示例 #

$(document).ready(function () {
    // 修正拼写错误，匹配placeholder为Email的input
    $('#divId input[placeholder="Email"]').css('background-color', 'red');
    // 修正语法，匹配所有带placeholder属性的input
    $('#divId input[placeholder]').css('background-color', 'red');
    // 原正确的选择器，匹配带required属性的input
    $('#divId input:required').css('background-color', 'yellow');
});

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