如何用CSS选择所有属性值包含logo的元素？

核心结论：原生CSS没有直接匹配「任意属性值包含指定内容」的选择器，分两种场景处理： #

1. 已知目标属性（推荐，符合你提到的实际需求） #

既然实际只需为元素设置一两个相关属性，直接逐个指定属性选择器是最简洁高效的方案：

• 若要匹配属性值中以空格分隔的独立单词（比如class="logo nav"或id="header logo"），用~=选择器：

[class~="logo"],
[id~="logo"],
[custom~="logo"] {
  padding: 2px;
}

• 若要匹配属性值中包含任意子字符串（比如class="logo-header"或data-id="logoxyz"），改用*=选择器：

[class*="logo"],
[id*="logo"],
[custom*="logo"] {
  padding: 2px;
}

2. 未知所有属性（仅特殊场景使用） #

如果确实需要匹配任意属性的包含值，原生CSS无法实现，只能通过JavaScript遍历处理：

const targetStr = 'logo';
document.querySelectorAll('*').forEach(el => {
  // 遍历元素的所有属性
  for (const attr of el.attributes) {
    if (attr.value.includes(targetStr)) {
      el.classList.add('has-logo-attribute');
      break; // 找到匹配属性后停止当前元素的检查
    }
  }
});

然后在CSS中定义对应样式：

.has-logo-attribute {
  padding: 2px;
}

⚠️ 注意：这种方法会遍历页面所有元素和属性，元素较多时可能影响性能，非必要不推荐。

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