能否用CSS的attr()实现基于data-color动态匹配data-media的元素选择？

很遗憾，你想要的这种基于元素自身两个属性的动态匹配，目前纯CSS做不到。原因如下：

• CSS的attr()函数仅能在少数属性（比如content）中使用，不能在属性选择器里动态解析另一个属性的值。你写的.item[data-media*="attr('data-color')"]不会把attr('data-color')替换成元素实际的data-color属性值，浏览器只会把它当作字面量字符串去匹配data-media，自然达不到预期效果。
• CSS属性选择器只能使用固定的字面量值，无法实现同一元素两个属性之间的 substring 匹配逻辑。

可行的解决方案：JavaScript #

既然你已经通过JavaScript动态修改data-color，那直接在JS里完成匹配逻辑是最直接的方式。可以写一个函数，遍历所有.item元素，检查每个元素的data-media是否包含自身的data-color值，然后切换显示状态：

function filterItems() {
  document.querySelectorAll('.item').forEach(item => {
    const media = item.dataset.media;
    const color = item.dataset.color;
    item.style.display = media.includes(color) ? 'block' : 'none';
  });
}

// 初始化时执行一次
filterItems();

// 当data-color动态变更后，调用这个函数更新显示
// 比如在修改data-color的代码后添加：filterItems();

这样无论data-color怎么动态变化，只要调用filterItems()就能实时更新元素的显示状态，完全不需要枚举所有颜色选项。

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