如何根据属性对同class不同标识属性的<div>元素进行覆盖？

没问题，我来给你梳理几种针对这类带自定义foo属性的.myClass元素的覆盖操作方案，不管是样式修改还是内容/行为替换都能搞定：

方案1：用CSS实现样式覆盖 #

如果你只是想针对不同foo值的元素做样式上的覆盖，直接用类选择器+属性选择器的组合就可以，优先级足够覆盖基础样式：

/* 先给所有.myClass元素设置基础样式 */
.myClass {
  border: 1px solid #ddd;
  padding: 8px;
  margin: 5px 0;
}

/* 精准覆盖foo值为anythingInHere_1的元素 */
.myClass[foo="anythingInHere_1"] {
  border-color: #ff4444;
  background-color: #ffebee;
}

/* 精准覆盖foo值为anythingInHere_2的元素 */
.myClass[foo="anythingInHere_2"] {
  border-color: #2196f3;
  background-color: #e3f2fd;
}

这种方式不需要JS，纯CSS就能实现不同属性值元素的样式差异化覆盖。

方案2：用JavaScript实现内容/行为覆盖 #

如果需要修改元素内容、替换内部标签，或者添加交互逻辑，就用JS来精准定位并操作：

方式1：精准选中单个元素操作 #

// 选中foo=anythingInHere_1的.myClass元素
const targetDiv1 = document.querySelector('.myClass[foo="anythingInHere_1"]');
if (targetDiv1) {
  // 比如替换内部的图片（覆盖原有内容）
  targetDiv1.innerHTML = '<img src="你的新图片路径" alt="替换后的图片" width="104" height="142">';
}

// 选中foo=anythingInHere_2的.myClass元素做另一种操作
const targetDiv2 = document.querySelector('.myClass[foo="anythingInHere_2"]');
if (targetDiv2) {
  // 比如给图片添加点击事件
  targetDiv2.querySelector('img').addEventListener('click', () => {
    alert('你点击了foo=anythingInHere_2的图片');
  });
}

方式2：批量处理所有.myClass元素 #

如果有很多不同foo值的元素，可以遍历所有目标元素，根据属性值做不同处理：

document.querySelectorAll('.myClass').forEach(div => {
  const fooValue = div.getAttribute('foo');
  
  switch(fooValue) {
    case 'anythingInHere_1':
      // 覆盖内容：替换成文本
      div.textContent = '这是foo=anythingInHere_1的覆盖内容';
      break;
    case 'anythingInHere_2':
      // 覆盖样式：修改图片尺寸
      div.querySelector('img').style.width = '150px';
      div.querySelector('img').style.height = '200px';
      break;
    // 可以继续添加更多case处理其他foo值
    default:
      // 处理未匹配到的foo值
      div.style.opacity = '0.7';
  }
});

额外规范提示 #

其实HTML规范里推荐自定义属性使用data-*前缀（比如把foo改成data-foo），这样可以避免和未来的标准属性冲突，用法也很简单：

• HTML里写成<div class="myClass" data-foo="anythingInHere_1">
• CSS里用.myClass[data-foo="anythingInHere_1"]
• JS里用div.dataset.foo直接获取属性值（更简洁）

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