CSS选择器对属性不敏感

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]

这就是最后的"我".

更广泛的采用始于2016年中期:Chrome(自v49以来),Firefox(来自v47？),Opera和其他一些人都有.IE不和Edge还没有.请参阅"我可以使用" ......

Answer 2

它现在存在于CSS4中,请参阅此答案.

否则,对于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数组或扩充Array对象.

Answer 3

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

支持:版本:Chrome> = 49.0,Firefox(Gecko)> = 47.0,Safari> = 9