說到正則（RegEx），我們第一反應(yīng)往往是“在編程中用來匹配或驗證字符串”，比如做表單驗證。但其實在 CSS 中，也能用到與正則類似的選擇器特性，為我們的樣式管理帶來諸多便利。別懷疑，以下就是如何在 CSS 里“以正則之名”提升效率的真實案例。

當類名越來越多時

舉個例子：你在做一個商品列表頁面，每個商品都有可能是：

• 新品（new）
• 暢銷（best-seller）
• 暫時缺貨（out-of-stock）
• 甚至多種狀態(tài)疊加

如果你為這些狀態(tài)分別寫不同的類，比如 .new、.bestseller、.out-of-stock，然后在 HTML 里瘋狂堆疊類名，就會發(fā)現(xiàn) CSS 變得十分臃腫、不易維護。

CSS + “正則” = 雙贏

好消息是，CSS 提供了三種與正則思路類似的特殊屬性選擇器，讓我們可以更靈活地篩選類名。

(^) 插入符：匹配以某字符串開頭的類名。

• 例：div[class^="card"] 匹配所有類名以 card 開頭的元素。

(*) 星號：匹配在任意位置出現(xiàn)的子串。

• 例：div[class*="new"] 匹配類名里含有 new 的所有元素。

($) 美元符：匹配以特定字符串結(jié)尾的類名。

• 例：div[class$="prioritize"] 匹配類名以 prioritize 結(jié)尾的元素。

有了它們，我們就能用更加簡潔的方式來管理各種狀態(tài)，而無需定義一堆獨立類。

實踐例子：從混亂到優(yōu)雅

假設(shè)我們想給“新品”商品加一個“新”角標或標志，以往的做法是：

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

然后在 CSS 里用 .new 做對應(yīng)樣式。但如果改用“正則”選擇器，我們可以只寫一個帶有 new 的類名，如：card-new。

1. 給新品加標識

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

只要類名里包含“new”，就會自動加載新品圖標。比如：

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

即可匹配到這個規(guī)則。

2. 為暢銷商品加特殊背景

類似地，如果類名里含有 seller，可以這樣寫：

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

那么像 card-seller 或 card-new-seller 都會觸發(fā)該樣式。這樣一來，如果有一個商品既是新品又是暢銷，只要設(shè)置類名為 card-new-seller，同時包含 new 和 seller，就能疊加兩種效果，無需再為多重狀態(tài)編寫額外 CSS 規(guī)則。

處理缺貨商品 (out-of-stock)

對缺貨商品，可以在類名中包含 out，例如：card-out。在 CSS 中只需寫：

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

結(jié)果就是所有帶 out 關(guān)鍵字的商品，都統(tǒng)一呈現(xiàn)“灰階 + 半透明”的視覺效果。而如果商品既是新品，又缺貨，又是暢銷，只要類名是 card-new-seller-out，就能自動應(yīng)用所有相應(yīng)的樣式規(guī)則。

按優(yōu)先級排序

假設(shè)我們想讓有些商品在列表中排在最前面，可以用 prioritize 字樣。

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

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

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

另外，如果想排除缺貨的優(yōu)先級高商品，可以在選擇器加上 :not()，比如：

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

這樣就不會把“既優(yōu)先又缺貨”的商品也放到最前。

正則式選擇器小結(jié)

• **^=**：定位以某字符串開頭的類名
• ***=**：搜索類名任意位置
• **$=**：匹配以某字符串結(jié)尾的類名

這三種方式讓我們可以“巧妙地”給不同類名加上相同前綴或后綴，不同子字符串，就能輕松管理多重狀態(tài)。相比傳統(tǒng)的“一堆獨立類再手動組合”，這種寫法更緊湊，維護起來也更輕松。

結(jié)語

“在 CSS 中用正則”聽上去可能有點稀奇，但只要掌握了 ^, *, $ 這三個巧妙的小技巧，就能大幅簡化對多狀態(tài)類名的管理，讓你的 CSS 文件告別混亂。此外，與團隊成員約定好“關(guān)鍵字”用法，還能讓協(xié)作更高效、風(fēng)格更統(tǒng)一。

如果覺得這篇分享對你有幫助，可以點個贊或告訴同事們——畢竟，靈活運用這些選擇器，絕對能讓你的項目在維護性和可讀性方面更勝一籌。祝編碼愉快，玩轉(zhuǎn) CSS！