CSS 伪类：第 n 个子问题答案

【问题标题】：CSS pseudo-class :nth child issuesCSS 伪类：第 n 个子问题
【发布时间】：2026-01-05 09:55:02
【问题描述】：

我正在尝试设置 googlemap 信息窗口的样式。

我想定位这个 div

这似乎是定位我想要的 div 的唯一方法

.gm-style div div:nth-child(3) div:nth-child(4) div div div:nth-child(2) {
background: white !important; 
border-radius: 0px !important; 
box-shadow:0px 0px 60px 0px rgba(0, 0, 0, 0.07);
}

但是，当我这样做时，似乎我不仅针对我的 div，而且还针对其他 div。

任何想法为什么？

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

标签： css google-maps css-selectors

【解决方案1】：

这是因为您的选择器不够具体。 .gm-style div 适用于.gm-style 中包含的任何 div 元素，而不仅仅是直接子元素。

根据您提供的屏幕截图，您可以使用以下方法选择此元素：

.gm-style > div > div:nth-child(3) > div:nth-child(4) > div > div > div:nth-child(2)

请注意，如果不是特定子元素的任何 div 元素有自己的元素，这也可能会选择它们，因此您可能还需要选择它们的特定子索引：

.gm-style > div:first-child > div:nth-child(3) > div:nth-child(4) > div:first-child > div:first-child > div:nth-child(2)

但是没有看到完整的代码可能有点矫枉过正。

【讨论】：

【解决方案2】：

我没有看到您拥有的完整 html“因为这对我有帮助”，但是您可以尝试任何方式

.gm-style > div > div:nth-of-type(3) > div:nth-of-type(4) > div > div > div:nth-of-type(2)

【讨论】：