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

Posted 2023-03-05

【中文标题】CSS 选择器对属性不区分大小写

【英文标题】：CSS selector case insensitive for attributes

【发布时间】：2011-08-05 23:42:02

【问题描述】：

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

input[value='Search'] 匹配

input[value='search'] 不匹配

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

【问题讨论】：

可能重复的问题？ ***.com/questions/3967869/…

【参考方案1】：

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

input[value='search' i]

最后的“i”起到了作用。

2016 年年中开始更广泛地采用：Chrome（自 v49 起）、Firefox（自 v47 起？）、Opera 和其他一些公司都有。 IE 不是和 Edge，因为它使用 Blink。见“Can I use”...

【讨论】：

@Miscreant：请参阅***.com/questions/27506735/…，了解如何让它在您的浏览器中运行。

Chrome 在 49.0 版（2016 年 3 月发布）中增加了对此的支持。 Firefox 将在 47.0 版（计划于 2016 年 6 月发布）中添加支持。来源：developer.mozilla.org/en-US/docs/Web/CSS/…

我可以确认它适用于普通的 Chromium 版本 49.0.2623.108。

【参考方案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。

【讨论】：

自定义选择器看起来和我需要的完全一样。你能解释一下什么是属性[3]？

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

@alex 是否可以为任何属性使用这种自定义选择器？让名称、值、类等所有属性不区分大小写？

@Alp 是的，但它有点乱。让我更新一下：）

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

【参考方案3】：

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

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

【参考方案4】：

你不能单独使用选择器，试试：

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

【讨论】：

你也可以在那里使用val()。此外，他们似乎想要完全匹配，而不是indexOf()。 :)

非常正确，但我使用attr() 来表明您也可以将其用于其他属性。更新为完全匹配。