能否以类似类的形式使用data-*属性实现多值选择器匹配？

可以直接用CSS原生的空格分隔属性值匹配选择器实现，不需要额外调整你的HTML写法。

你提到的全等匹配选择器[data-el="xxx"]只能匹配属性值完全等于xxx的元素，换成波浪号前缀的属性包含选择器即可实现和类选择器完全一致的效果：该选择器会匹配属性值为空格分隔的列表，且列表中包含对应指定值的元素。

示例代码 #

你的HTML保持原有写法即可：

<div data-el="asset assets.asset">Some div</div>

CSS选择器写法：

/* 可匹配到上述元素 */
[data-el~="asset"] {
  /* 你的样式 */
}

/* 同样可匹配到上述元素 */
[data-el~="assets.asset"] {
  /* 你的样式 */
}

如果需要在JS中选中对应元素，也可以直接使用该选择器：

const el = document.querySelector('[data-el~="asset"]')

内容的提问来源于stack exchange，提问作者Lama's