CSS选择器对属性不区分大小写

如何解决CSS选择器对属性不区分大小写

| 如果我有一个HTML元素“ 0”，则css选择器必须区分大小写：

input[value=\'Search\']

场比赛

input[value=\'search\']

不符 我需要一种不区分大小写方法的解决方案。我正在使用Selenium 2和Jquery，因此欢迎为它们提供答案。     

解决方法

它现在存在于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,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

对象。     ,CSS4（4级CSS选择器）增加了对它的支持：

input[value=\'search\' i]

最后就是“ i”。 从2016年中开始广泛采用：Chrome（自v49起），Firefox（自v47起），Opera等。 IE浏览器还没有，Edge还没有。请参阅“我可以使用” ...     ,

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\';
});