如何匹配属性名以data-ref-为前缀的动态属性HTML元素？

你编写的[data-ref-*='group']选择器无法生效，是因为CSS原生属性选择器的通配符逻辑仅针对属性值做匹配，而非属性名：

• [attr*=value]的匹配逻辑为：选中属性名完全等于attr，且属性值包含value的元素
• 你的需求是匹配属性名前缀为data-ref-、且属性值等于group的元素，目前原生CSS没有直接支持属性名模糊匹配的语法。

方案1：调整属性结构（最优，性能最高） #

如果可以修改HTML结构，建议把随机十六进制编码从属性名移到属性值中，固定属性名即可用原生CSS直接匹配：

<div data-ref="group 15af36e1">foo</div>
<div data-ref="group 63b361af">bar</div>
<div data-ref="item c836eea7">baz</div>

对应CSS选择器用属性值包含匹配即可：

/* ~= 匹配属性值中以空格分隔的独立字段 */
[data-ref~="group"] {
  color: red;
}

方案2：JavaScript辅助匹配（无需修改HTML） #

如果不能调整现有HTML结构，可以用JS遍历元素匹配规则，给符合要求的元素加统一类名后用CSS定义样式：

document.querySelectorAll('*').forEach(el => {
  for (const attr of el.attributes) {
    // 匹配属性名前缀和属性值规则
    if (attr.name.startsWith('data-ref-') && attr.value === 'group') {
      el.classList.add('ref-group-target');
      break;
    }
  }
})

对应CSS：

.ref-group-target {
  color: red;
}

提示：如果页面元素量级较大，可以将document.querySelectorAll('*')替换为更小范围的选择器缩小遍历范围，提高执行性能。

内容的提问来源于stack exchange，提问作者Hao Wu