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

當(dāng)類(lèi)名越來(lái)越多時(shí)

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

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

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

CSS + “正則” = 雙贏

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

(^) 插入符：匹配以某字符串開(kāi)頭的類(lèi)名。

• 例：div[class^="card"] 匹配所有類(lèi)名以 card 開(kāi)頭的元素。

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

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

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

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

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

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

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

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

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

1. 給新品加標(biāo)識(shí)

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

只要類(lèi)名里包含“new”，就會(huì)自動(dòng)加載新品圖標(biāo)。比如：

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

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

2. 為暢銷(xiāo)商品加特殊背景

類(lèi)似地，如果類(lèi)名里含有 seller，可以這樣寫(xiě)：

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

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

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

對(duì)缺貨商品，可以在類(lèi)名中包含 out，例如：card-out。在 CSS 中只需寫(xiě)：

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

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

按優(yōu)先級(jí)排序

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

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

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

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

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

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

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

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

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

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

結(jié)語(yǔ)

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

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