为什么我喜欢在 CSS 中使用 RegEx
说到正则（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 文件告别混乱。此外，与团队成员约定好“关键字”用法，还能让协作更高效、风格更统一。
如果觉得这篇分享对你有帮助，可以点个赞或告诉同事们——毕竟，灵活运用这些选择器，绝对能让你的项目在维护性和可读性方面更胜一筹。祝编码愉快，玩转 CSS！
最后：
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集
VueUse源码解读