在CSS的样式规则编写中，开发者经常会遇到需要匹配一批符合特定规律的类名的需求，比如匹配所有以特定前缀开头的类，或者包含特定字符的类。CSS本身没有针对类名的专属通配符选择器，但可以通过属性选择器结合*、^、$三个特殊符号，实现类似通配符的匹配效果，这三个符号分别对应不同的匹配规则，适用场景也有所区别。
三个符号的基础匹配规则
在CSS属性选择器中，这三个符号的作用和正则表达式中的通配符逻辑类似，具体含义如下：
- *：匹配属性值中包含指定字符串的元素，不管字符串出现在属性值的开头、中间还是结尾
- ^：匹配属性值以指定字符串开头的元素
- $：匹配属性值以指定字符串结尾的元素
当我们需要针对类名进行匹配时，这里的属性就是class属性，因为HTML元素的类名是存储在class属性中的。
具体用法与代码示例
使用*匹配包含特定字符串的类
如果我们想给所有类名中包含card的元素设置统一样式，就可以使用*符号，代码如下：
/* 匹配class属性值中包含card字符串的所有元素 */
[class*="card"] {
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
}
假设页面中有以下三个元素，都会被上述规则匹配到：
<div class="card">基础卡片</div> <div class="card_header">卡片头部</div> <div class="info_card">信息卡片</div>
使用^匹配以特定字符串开头的类
如果我们需要给所有类名以btn开头的元素设置按钮基础样式，就可以使用^符号，代码如下：
/* 匹配class属性值以btn开头的元素 */
[class^="btn"] {
display: inline-block;
padding: 8px 16px;
cursor: pointer;
border: none;
border-radius: 4px;
font-size: 14px;
}
以下元素会被匹配：
<button class="btn">默认按钮</button> <button class="btn_primary">主要按钮</button> <button class="btn_danger">危险按钮</button>
使用$匹配以特定字符串结尾的类
如果我们需要给所有类名以_active结尾的元素设置激活状态样式，就可以使用$符号，代码如下：
/* 匹配class属性值以_active结尾的元素 */
[class$="_active"] {
color: #1677ff;
font-weight: 600;
}
以下元素会被匹配：
<div class="tab_active">激活的标签页</div> <div class="menu_item_active">激活的菜单项</div>
注意事项
使用这些选择器时需要注意几个问题：
- 属性选择器匹配的是
class属性的完整字符串，如果元素有多个类名，只要其中一个类名符合匹配规则就会被选中，比如<div class="box card info"></div>也会被[class*="card"]匹配到 - ^和$的匹配是严格区分字符串位置的，如果类名中间有空格分隔的其他类名，不会影响匹配结果，但如果指定字符串不是严格在开头或结尾，就不会被匹配
- 这些选择器的优先级比单个类选择器低，比如
.card的优先级高于[class*="card"]，如果同时存在样式冲突，会优先应用.card的样式
适用场景总结
这三个符号的类匹配用法适合在以下场景使用：
| 符号 | 适用场景 |
|---|---|
| * | 批量匹配包含相同特征字符串的类名，比如组件通用后缀、公共模块标识 |
| ^ | 匹配同一前缀的组件类，比如所有按钮类、所有卡片类 |
| $ | 匹配同一后缀的状态类，比如所有激活状态类、所有禁用状态类 |
合理使用这些选择器可以减少重复的样式代码，提升样式维护的效率，但也不要过度使用，避免样式匹配范围过大导致意外的样式覆盖问题。