Question

如果我有一个HTML元素<input type="submit" value="Search" />，则css选择器需要区分大小写：

input[value='Search']匹配

input[value='search']不匹配

我需要一个解决方案，其中不区分大小写的方法也适用。我正在使用 Selenium 2 和 Jquery ，所以两者的答案都是欢迎。

Answer 1

CSS4 (CSS Selector Level 4) 增加对它的支持：

input[value='search' i]

它是＆＃34;我＆＃34;在最后，这诀窍。

更广泛的采用从2016年中期开始：Chrome（自v49以来），Firefox（来自v47？），Opera和其他一些人拥有它。 IE不和Edge还没有。见“Can I use” ...

Answer 2

它现在存在于CSS4中，请参阅this answer。

否则，对于jQuery，您可以使用...

$(':input[name]').filter(function() {
   return this.value.toLowerCase() == 'search';
});

jsFiddle

你也可以制作一个自定义选择器......

$.expr[':'].valueCaseInsensitive = function(node, stackIndex, properties){
     return node.value.toLowerCase() == properties[3];
};

var searchInputs = $(':input:valueCaseInsensitive("Search")');

jsFiddle

如果执行此操作一次，自定义选择器有点过分，但如果您需要在应用程序中多次使用它，那么这可能是一个好主意。

更新

是否可以为任何属性设置这种自定义选择器？

当然，请查看以下示例。它有点复杂（: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")');

jsFiddle

您可以使用eval()使该字符串成为一个数组，但我觉得这样做更舒服（并且您不会意外地执行您在选择器中放置的任何代码）。

相反，我在,分隔符上拆分字符串，然后在每个数组成员的任一侧剥去空格'和"。请注意，引号内的,不会按字面意思处理。没有理由按字面意思要求，但你总是可以对这种可能性进行编码。我会把它留给你。：）

我认为map()不具备最佳浏览器支持，因此您可以明确地迭代args数组或augment the Array object。

Answer 3

input[value='Search'] matches
input[value='search' i] Also matches in latest browsers

支持：版本：Chrome＆gt; = 49.0，Firefox（Gecko）＆gt; = 47.0，Safari＆gt; = 9

Answer 4

单独使用选择器无法做到这一点，请尝试：

$('input').filter(function() {
    return $(this).attr('value').toLowerCase() == 'search';
});

CSS选择器对属性不敏感

4 个答案:

更新