如何覆盖内嵌在div元素style属性中的地图鼠标光标样式？

我来帮你分析下问题所在，以及对应的解决方法：

为什么之前的方法不生效？ #

你之前用[style*='openhand_8_8.cur']这类属性选择器匹配元素，再加!important试图覆盖样式但没成功，核心原因是：内嵌在元素style属性里的CSS优先级极高（权重为1000），而你的属性选择器权重很低（仅为10），哪怕加了!important，在选择器精准度不足的情况下，浏览器的优先级计算还是会优先使用内嵌样式。

另外，部分地图组件会在交互或加载过程中动态更新元素的style属性，可能会覆盖你通过<style>标签注入的样式。

三种可行的解决方法 #

方法1：使用高权重CSS选择器 + !important

利用你找到的精准元素层级选择器，结合!important来提升样式优先级，直接覆盖内嵌样式。

创建对应的样式标签并注入：

const styleC = document.createElement('style');
styleC.innerHTML = `
  #map > div > div.gm-style > div:nth-child(1) {
    cursor: grab !important;
  }
  #map > div > div.gm-style > div:nth-child(1):active {
    cursor: grabbing !important;
  }
`;
document.head.appendChild(styleC);

这种方法的核心是用精准的层级选择器（权重远高于属性选择器）+ !important，直接压制内嵌样式的优先级。

方法2：直接修改DOM元素的style属性

如果CSS方式还是不生效，直接操作元素的style属性是最高优先级的方案，肯定能覆盖原有的内嵌样式：

const mapCursorEl = document.querySelector("#map > div > div.gm-style > div:nth-child(1)");
if (mapCursorEl) {
  // 覆盖默认状态的光标
  mapCursorEl.style.cursor = "grab";

  // 处理拖拽状态的光标切换
  mapCursorEl.addEventListener('mousedown', () => {
    mapCursorEl.style.cursor = "grabbing";
  });
  // 监听全局mouseup，防止鼠标移出地图后无法恢复光标
  document.addEventListener('mouseup', () => {
    mapCursorEl.style.cursor = "grab";
  });
}

方法3：用MutationObserver监听样式变化（应对动态更新）

如果地图组件会在加载完成、交互过程中动态重写元素的style属性，那你需要用MutationObserver来监听属性变化，实时覆盖样式：

const mapCursorEl = document.querySelector("#map > div > div.gm-style > div:nth-child(1)");
if (mapCursorEl) {
  // 初始化光标样式
  mapCursorEl.style.cursor = "grab";

  // 监听style属性变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.attributeName === 'style') {
        // 每次style被修改后，强制覆盖为我们需要的光标
        mapCursorEl.style.cursor = "grab";
      }
    });
  });

  // 启动监听，只监听style属性
  observer.observe(mapCursorEl, { attributes: true, attributeFilter: ['style'] });

  // 处理拖拽状态的光标
  mapCursorEl.addEventListener('mousedown', () => {
    mapCursorEl.style.cursor = "grabbing";
  });
  document.addEventListener('mouseup', () => {
    mapCursorEl.style.cursor = "grab";
  });
}

推荐使用顺序 #

1. 先尝试方法1，这是最简洁的CSS方案，侵入性最低；
2. 如果方法1无效，再用方法2，直接操作DOM样式优先级最高；
3. 如果地图会动态重置样式，最后用方法3来保证样式始终生效。

内容来源于stack exchange