如何仅用CSS修改Google Maps InfoWindow自动生成的嵌套Div样式？

嘿，我刚好处理过类似的Google Maps InfoWindow样式问题，不用JS完全可以搞定！下面给你两种靠谱的CSS方案，根据你的需求和浏览器兼容性要求来选：

方案一：用:has()伪类（精准推荐） #

这是最稳妥的方式，直接通过.gm-style-iw反向定位它的父级和兄弟元素，不用担心Google Maps结构小幅度调整（只要.gm-style-iw类名不变就有效）。

1. 修改包含.gm-style-iw的父div（你的第一个目标元素） #

这个div就是InfoWindow的外层容器，控制整体的背景、边框等：

.gm-style div:has(.gm-style-iw) {
  /* 示例样式：自定义背景、边框、圆角 */
  background-color: #ffffff;
  border: 2px solid #3498db;
  border-radius: 8px;
  padding: 8px;
}

2. 修改父div内的第一个子div（你的第二个目标元素） #

这个div通常是InfoWindow底部的箭头（小三角），用来调整箭头的样式：

.gm-style div:has(.gm-style-iw) > div:first-of-type {
  /* 示例样式：让箭头颜色和容器边框一致 */
  border-top-color: #3498db !important;
  /* 调整箭头大小 */
  border-width: 10px;
}

注意：:has()伪类目前支持Chrome、Firefox 120+、Safari等现代浏览器，如果你的项目需要兼容旧版浏览器，可以看下面的方案二。

方案二：用层级后代选择器（兼容旧浏览器） #

如果需要适配不支持:has()的旧浏览器，可以通过固定结构层级来定位目标元素。Google Maps的InfoWindow结构短期内相对稳定，你可以根据提供的DOM结构写精准的层级选择器：

/* 定位第一个目标div（包含gm-style-iw的父容器） */
.gm-style > div > div > div > div > div > div {
  background-color: #ffffff;
  border: 2px solid #3498db;
  border-radius: 8px;
  padding: 8px;
}

/* 定位第二个目标div（箭头元素） */
.gm-style > div > div > div > div > div > div > div:first-child {
  border-top-color: #3498db !important;
  border-width: 10px;
}

小提示：如果样式不生效，大概率是优先级不够，可以尝试给选择器加更多层级，或者在样式属性后加!important（尽量少用，但必要时可以快速验证）。另外记得调整.gm-style-iw的内边距，避免内容贴边：

.gm-style-iw {
  padding: 0 !important;
  margin: 0 !important;
}

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