CSS不支持完整正则表达式，但提供类正则属性选择器实现模式匹配：如[attr^="value"]、[attr$="value"]、[attr*="value"]等，用于开头、结尾、包含等场景；因性能与维护考虑，完整正则未被纳入标准，复杂需求可由JavaScript替代，结合属性选择器可高效满足多数样式控制场景。
CSS 本身并不支持在选择器中使用完整的正则表达式（regular expression），但提供了部分类似正则的属性选择器语法，用于匹配元素的属性值。这些功能虽然不是真正的正则，但在实际开发中非常实用，可以实现模糊匹配和模式判断。
1. CSS 属性选择器中的“类正则”匹配方式
CSS 提供了多种基于属性值进行匹配的选择器，它们能实现一定程度的模式匹配，常用于动态样式控制：
-
[attr^="value"]：匹配属性值以指定字符串开头的元素
示例：img[src^="https"] 匹配所有 src 以 "https" 开头的图片。 -
[attr$="value"]：匹配属性值以指定字符串结尾的元素
示例：a[href$=".pdf"] 给所有链接到 PDF 文件的锚点添加图标。 -
[attr*="value"]：匹配属性值包含指定子串的元素
示例：[class*="btn-"] 匹配 class 中包含 "btn-" 的任意元素。 -
[attr|="value"]：匹配属性值等于指定值或以该值加连字符开头的元素
示例：[lang|="en"] 匹配 lang="en" 或 lang="en-US"。 -
[attr~="value"]：匹配属性值中包含独立单词的元素（空格分隔）
示例：[class~="highlight"] 只匹配 class 列表中单独出现的 "highlight"。
2. 为什么不能用完整正则表达式？
CSS 设计初衷是简单、高效地描述文档样式，而不是处理复杂逻辑。如果允许完整的正则表达式：
- 性能开销大，影响渲染速度
- 增加浏览器解析复杂度
- 容易导致样式规则难以维护
因此，W3C 没有将完整正则纳入标准。这类需求通常交由 JavaScript 处理更合适。
立即学习“前端免费学习笔记（深入）”；
3. 替代方案：JavaScript 实现正则选择
若需真正使用正则匹配 DOM 元素，可通过 JS 实现：
// 示例：选择所有 id 符合数字结尾的元素
document.querySelectorAll('[id]').forEach(el => {
if (/id\d+$/.test(el.id)) {
el.style.border = '1px solid red';
}
});
这种方式灵活强大，适合复杂条件筛选，但不属于 CSS 范畴。
4. 小技巧：结合属性选择器提升效率
合理利用现有属性选择器，可减少类名滥用：
- 外部链接标识：a[href^="http"]:not([href*="yoursite.com"])::after
- 文件类型图标：a[href$=".zip"]::before { content: '?' }
- 数据属性过滤：[data-status*="error"]
基本上就这些。CSS 虽不支持正则，但提供的属性匹配机制已能满足大多数常见场景，简洁且高效。
