如何通过CSS属性定位无类无ID的div并修改背景色？

CSS 属性选择器方案 #

利用目标div的内联样式特征，通过多属性组合的选择器精准定位，再结合深色模式媒体查询覆盖背景色：

@media (prefers-color-scheme: dark) {
  /* 匹配包含指定内联样式的div */
  div[style*="margin-bottom:10px"][style*="background-color:#fff"][style*="padding:10px"] {
    background-color: #2d2d2d !important; /* 强制覆盖内联样式 */
  }
}

• 多属性选择器能降低误匹配概率，确保只修改目标div；
• !important必须添加，因为内联样式优先级高于外部CSS。

JavaScript 精准匹配方案 #

如果CSS选择器因内联样式顺序、空格等问题失效，可通过遍历元素并匹配计算后的样式来修改：

// 监听深色模式切换
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', adjustDivBackground);
// 页面加载时初始化样式
adjustDivBackground();

function adjustDivBackground() {
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.querySelectorAll('div').forEach(div => {
    const style = window.getComputedStyle(div);
    // 匹配目标div的样式特征
    if (style.marginBottom === '10px' && 
        style.backgroundColor === 'rgb(255, 255, 255)' && 
        style.padding === '10px') {
      div.style.backgroundColor = isDark ? '#2d2d2d' : '#fff';
    }
  });
}

• 基于计算后的样式匹配，不受内联样式的书写顺序、空格影响；
• 自动监听系统深色模式变化，实时调整背景色。

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