在编写 CSS 时，我们经常会遇到一类动态生成的节点，它们的类名以某个固定前缀加数字命名，比如 num1、num2、num3。如果希望给所有这些元素统一设置样式，逐条写类选择器显然低效且难维护。此时利用属性选择器从类名开头进行匹配是最直接的办法。
属性选择器的基本写法
CSS 中可以使用[class^="num"]来选中 class 属性值以 num 开头的元素。其中的 ^ 表示“起始匹配”，类似于正则里的行首断言。
/* 选中 class 以 num 开头的元素 */
[class^="num"] {
color: #c0392b;
padding: 8px;
border: 1px solid #ddd;
}容易混淆的几种选择器
下面通过对比说明不同符号的含义，避免误用：
| 选择器 | 匹配规则 | 示例命中 |
|---|---|---|
[class^="num"] | 属性值以 num 开头 | num1、num2 |
[class*="num"] | 属性值包含 num | num1、box-num、minnum |
[class|="num"] | 以 num 开头或 num- 开头 | num、num-1 |
多类名场景的注意点
当元素的 class 包含多个值时，例如class="box num1"，此时整体属性值是 "box num1"，开头并不是 num，因此[class^="num"]不会选中它。若要多类名也能稳定命中，可改用[class*=" num"]并在前面加空格，或者规范生成逻辑保证前缀类排在第一位。
<div class="num1">第一项</div> <div class="num2">第二项</div> <div class="box num3">不会被 ^ 选中</div>
结合其他条件精确控制
属性选择器也能和标签、伪类组合，提升精确度：
/* 仅选中 div 且类名以 num 开头 */
div[class^="num"] {
background: #f5f5f5;
}
/* 选中其中的第一个 */
div[class^="num"]:first-of-type {
font-weight: bold;
}实际使用示例
假设我们用 JS 批量渲染了序号块，就可以只写一条 CSS 完成基础排版：
// 生成带 num 前缀类名的节点
for (let i = 1; i <= 5; i++) {
const el = document.createElement('div');
el.className = 'num' + i;
el.textContent = '区块' + i;
document.body.appendChild(el);
}配合前面的[class^="num"]规则，这五个区块会自动套用红色文字与边框，无需额外手工指定样式表。这种写法在后台列表、步骤条、图表容器等场景中非常实用。