当前位置：首页 > news >正文

为什么我喜欢在 CSS 中使用 RegEx

news 来源：原创 2025/5/8 23:44:00

说到正则（RegEx），我们第一反应往往是“在编程中用来匹配或验证字符串”，比如做表单验证。但其实在 CSS 中，也能用到与正则类似的选择器特性，为我们的样式管理带来诸多便利。别怀疑，以下就是如何在 CSS 里“以正则之名”提升效率的真实案例。

当类名越来越多时

举个例子：你在做一个商品列表页面，每个商品都有可能是：

新品（new）
畅销（best-seller）
暂时缺货（out-of-stock）
甚至多种状态叠加

如果你为这些状态分别写不同的类，比如 .new、.bestseller、.out-of-stock，然后在 HTML 里疯狂堆叠类名，就会发现 CSS 变得十分臃肿、不易维护。

CSS + “正则” = 双赢

好消息是，CSS 提供了三种与正则思路类似的特殊属性选择器，让我们可以更灵活地筛选类名。

(^) 插入符：匹配以某字符串开头的类名
- 例：div[class^="card"] 匹配所有类名以 card 开头的元素
(*) 星号：匹配在任意位置出现的子串
- 例：div[class*="new"] 匹配类名里含有 new 的所有元素
($) 美元符：匹配以特定字符串结尾的类名
- 例：div[class$="prioritize"] 匹配类名以 prioritize 结尾的元素

有了它们，我们就能用更加简洁的方式来管理各种状态，而无需定义一堆独立类。

实践例子：从混乱到优雅

假设我们想给“新品”商品加一个“新”角标或标志，以往的做法是：

<div class="card new"></div>

然后在 CSS 里用 .new 做对应样式。但如果改用“正则”选择器，我们可以只写一个带有 new 的类名，如：card-new。

1. 给新品加标识

div[class*="new"] {content: url('new-icon.png');
}

只要类名里包含“new”，就会自动加载新品图标。比如：

<div class="card-new"> ... </div>

即可匹配到这个规则。

2. 为畅销商品加特殊背景

类似地，如果类名里含有 seller，可以这样写：

div[class*="seller"] {background-color: gold;
}

那么像 card-seller 或 card-new-seller 都会触发该样式。这样一来，如果有一个商品既是新品又是畅销，只要设置类名为 card-new-seller，同时包含 new 和 seller，就能叠加两种效果，无需再为多重状态编写额外 CSS 规则。

处理缺货商品 (out-of-stock)

对缺货商品，可以在类名中包含 out，例如：card-out。在 CSS 中只需写：

div[class*="out"] {filter: grayscale(80%);opacity: 0.5;
}

结果就是所有带 out 关键字的商品，都统一呈现“灰阶 + 半透明”的视觉效果。而如果商品既是新品，又缺货，又是畅销，只要类名是 card-new-seller-out，就能自动应用所有相应的样式规则。

按优先级排序

假设我们想让有些商品在列表中排在最前面，可以用 prioritize 字样。

div[class*="prioritize"] {order: -1; /* 在 flex 或 grid 容器中可以让它排在前面 */
}

如果你希望把它放在末尾，可以改成：

div[class$="prioritize"] {order: 999;
}

另外，如果想排除缺货的优先级高商品，可以在选择器加上 :not()，比如：

div[class*="prioritize"]:not([class*="out"]) {order: -1;
}

这样就不会把“既优先又缺货”的商品也放到最前。

正则式选择器小结

^=：定位以某字符串开头的类名
*=：搜索类名任意位置
$=：匹配以某字符串结尾的类名

这三种方式让我们可以“巧妙地”给不同类名加上相同前缀或后缀，不同子字符串，就能轻松管理多重状态。相比传统的“一堆独立类再手动组合”，这种写法更紧凑，维护起来也更轻松。

结语

“在 CSS 中用正则”听上去可能有点稀奇，但只要掌握了 ^, *, $ 这三个巧妙的小技巧，就能大幅简化对多状态类名的管理，让你的 CSS 文件告别混乱。此外，与团队成员约定好“关键字”用法，还能让协作更高效、风格更统一。

作为程序员，持续学习和充电非常重要，作为开发者，我们需要保持好奇心和学习热情，不断探索新的技术，只有这样，我们才能在这个快速发展的时代中立于不败之地。低代码也是一个值得我们深入探索的领域，让我们拭目以待，它将给前端世界带来怎样的变革，推荐一个低代码工具。

应用地址： https://www.jnpfsoft.com
开发语言：Java/.net

这是一个基于Flowable引擎(支持java、.NET)，已支持MySQL、SqlServer、Oracle、PostgreSQL、DM（达梦）、 KingbaseES（人大金仓）6个数据库，支持私有化部署，前后端封装了上千个常用类，方便扩展，框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用。