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

Question

如果我有一个HTML元素<input type="submit" value="搜索" />，那么一个CSS选择器需要区分大小写：

input[value='Search'] 匹配

input[value='search'] 不匹配

我需要一种不区分大小写的解决方案。 我正在使用Selenium 2和Jquery，因此两者的答案都可以。

- Alp

---

可能是重复的问题？https://dev59.com/rlHTa4cB1Zd3GeqPPz5B - Tass

Answer 1

CSS4（CSS选择器 4级）支持此功能：

input[value='search' i]

正是结尾处的“i”起了作用。

更广泛的采用始于2016年中期: Chrome（自v49起），Firefox（从v47开始？），Opera和其他一些浏览器都有它。IE不支持，因为Edge使用了Blink内核。请参见“Can I use”...

- Robert Siemer

---

@Miscreant：请参考https://dev59.com/AF4c5IYBdhLWcg3wztCQ#28050505以获取在浏览器中的工作方式。 - BoltClock

Chrome在2016年3月发布的版本49.0中增加了对此的支持。Firefox将在预计于2016年6月发布的版本47.0中添加支持。来源：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#Browser_compatibility - Miscreant

我可以确认它与纯Chromium版本49.0.2623.108兼容。 - Robert Siemer

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 对象。

- alex

---

自定义选择器看起来正是我所需要的。你能解释一下properties[3]是什么吗？ - Alp

@Alp properties[3] 是作为自定义选择器参数传递的字符串（其他索引是各种元数据）。 - alex

@alex，是否有可能为任何属性创建这种自定义选择器？这样所有属性（如名称、值、类等）都不区分大小写？ - Alp

@Alp 是的，但会有点混乱。让我更新一下 :) - alex

一个更好的返回语句是：return typeof $(node).attr(args[0]) !== 'undefined' && $(node).attr(args[0]).toLowerCase() == args[1].toLowerCase(); - HamedH

可能可以，但我不会在那里使用 typeof，因为它并不必要。 - alex

Answer 3

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

支持： 版本：Chrome >= 49.0，Firefox (Gecko) >= 47.0，Safari >= 9

- ankit

Answer 4

仅使用选择器无法完成此操作，请尝试：

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

- Khez

---

你可以考虑使用 val()。同时，看起来他们想要一个精确匹配，而不是 indexOf()。 :) - alex

非常正确，但我使用了 attr() 来展示你也可以用它来处理其他属性。已更新为精确匹配。 - Khez