LESS中属性选择器正则匹配如何忽略大小写？-css教程-PHP中文网

LESS中属性选择器正则匹配如何忽略大小写？

碧海醫心

发布： 2025-02-24 08:36:22

原创

626人浏览过

less中属性选择器正则匹配如何忽略大小写？

LESS属性选择器正则匹配忽略大小写失效及解决方案

CSS属性选择器支持正则表达式匹配，并可通过i修饰符忽略大小写。然而，LESS中该修饰符无效。本文提供两种绕过此限制的LESS代码方案。

方案一：利用LESS string 函数

LESS没有直接支持正则表达式中的大小写忽略。我们可以使用string函数将目标字符串转换为小写，从而实现大小写不敏感的匹配：

<code class="less">[data-file-name$='.jpg'] {
  background: url('xxx') no-repeat center/cover;
  & when (@data-file-name: ~".*\.jpg") {
    background: url('xxx') no-repeat center/cover;
  }
}</code>

登录后复制

此方法先进行大小写敏感的匹配，然后使用when语句及正则表达式进行二次判断，确保匹配.jpg结尾的字符串，无论大小写。

有道小P

有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。

查看详情

方案二：使用LESS @extend 指令

另一种方法是利用LESS的@extend指令，创建一个包含大小写不敏感匹配的类，然后将其应用于目标元素：

<code class="less">.jpg-file {
  [data-file-name$='.jpg'] { /*此处大小写敏感*/
    background: url('xxx') no-repeat center/cover;
  }
}

.jpg-file {
  & when (@data-file-name: ~".*\.jpg") { /*此处大小写不敏感*/
    background: url('xxx') no-repeat center/cover;
  }
}</code>

登录后复制

此方法通过@extend指令以及when语句和正则表达式，实现了大小写不敏感的匹配。

选择哪种方法取决于项目的具体需求和代码风格。方案一更简洁，方案二可能在复杂场景下更易于维护。关键在于利用LESS的条件语句和正则表达式功能来弥补i修饰符的缺失。

以上就是LESS中属性选择器正则匹配如何忽略大小写？的详细内容，更多请关注php中文网其它相关文章！