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, 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
对象。     
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\';
});
    

要回复问题请先登录注册