返回
创建于
状态
公开
CSS 的 ID 选择器（如 #task-1）本身不支持模糊匹配，它要求完全匹配元素的 id 属性值。[3][9]
不过，您可以通过 属性选择器 来实现对 id 属性的模糊匹配，就像您提到的 id=task-* 这种需求：
属性选择器的模糊匹配方法
开头匹配（相当于 task-*）：
1[id^="task-"] {
2 color: red;
3}这会选择所有 id 以 "task-" 开头的元素。[1][2]
包含匹配：
1[id*="task"] {
2 background-color: yellow;
3}选择所有 id 包含 "task" 字符串的元素。[2][1]
结尾匹配：
1[id$="-task"] {
2 border: 1px solid blue;
3}选择所有 id 以 "-task" 结尾的元素。[1][2]
实际应用示例
1<div id="task-1">任务1</div>
2<div id="task-2">任务2</div>
3<div id="user-task-3">用户任务3</div>
4<div id="main-task">主任务</div>1/* 选择所有以 task- 开头的元素 */
2[id^="task-"] {
3 color: blue;
4} /* 匹配 task-1, task-2 */
5
6/* 选择所有包含 task 的元素 */
7[id*="task"] {
8 font-weight: bold;
9} /* 匹配所有四个元素 */这样就能实现类似通配符的效果，满足您对 id=task-* 模糊匹配的需求。[2][1]