如果我有一个 HTML 元素 <input type="submit" value="Search" />，则 css 选择器需要区分大小写：
input[value='Search'] 匹配
input[value='search'] 不匹配
我需要一个不区分大小写的方法也可以工作的解决方案。我正在使用 Selenium 2 和 Jquery，所以两者的答案都是欢迎。
【问题讨论】：
标签： jquery jquery-selectors css-selectors case-insensitive selenium-webdriver
CSS4 (CSS Selector Level 4) 增加了对它的支持：
input[value='search' i]
最后的“i”起到了作用。
2016 年年中开始更广泛地采用：Chrome（自 v49 起）、Firefox（自 v47 起？）、Opera 和其他一些公司都有。 IE 不是和 Edge，因为它使用 Blink。见“Can I use”...
【讨论】：
它现在存在于 CSS4 中，请参阅 this answer。
否则，对于 jQuery，你可以使用...
$(':input[name]').filter(function() {
return this.value.toLowerCase() == 'search';
});
您还可以制作自定义选择器...
$.expr[':'].valueCaseInsensitive = function(node, stackIndex, properties){
return node.value.toLowerCase() == properties[3];
};
var searchInputs = $(':input:valueCaseInsensitive("Search")');
自定义选择器如果只做一次就有点过头了，但如果你需要在应用程序中多次使用它，这可能是个好主意。
是否可以为任何属性使用这种自定义选择器？
当然，请查看以下示例。这有点复杂（:input[value:toLowerCase="search"] 之类的语法可能更直观），但它有效:)
$.expr[':'].attrCaseInsensitive = function(node, stackIndex, properties){
var args = properties[3].split(',').map(function(arg) {
return arg.replace(/^\s*["']|["']\s*$/g, '');
});
return $(node).attr(args[0]).toLowerCase() == args[1];
};
var searchInputs = $('input:attrCaseInsensitive(value, "search")');
您可能可以使用eval() 将该字符串设为数组，但我发现这样做更舒服（而且您不会意外执行放置在选择器中的任何代码）。
相反，我在, 分隔符上拆分字符串，然后在每个数组成员的任一侧剥离空格、' 和"。请注意，引号内的, 不会按字面意思对待。没有理由从字面上要求一个，但您总是可以针对这种可能性进行编码。我会把它留给你。 :)
我不认为map() 具有最好的浏览器支持，因此您可以显式迭代args 数组或augment the Array object。
【讨论】：
properties[3] 是作为参数传递给自定义选择器的字符串（其他索引是各种元数据）。
input[value='Search'] matches
input[value='search' i] Also matches in latest browsers
支持： 版本：Chrome >= 49.0，Firefox (Gecko) >= 47.0，Safari >= 9
【讨论】：
你不能单独使用选择器，试试：
$('input').filter(function() {
return $(this).attr('value').toLowerCase() == 'search';
});
【讨论】：
val()。此外，他们似乎想要完全匹配，而不是indexOf()。 :)
attr() 来表明您也可以将其用于其他属性。更新为完全匹配。