CSS伪类：第n个孩子问题

Question

我试图设置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。

任何想法为什么？

Answer 1

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

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

.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)

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

Answer 2

我没有看到你的完整HTML和＃34;因为它对我有帮助，但是你可以试试这个

.gm-style＆gt; div> div：nth-​​of-type（3）＆gt; div：nth-​​of-type（4）＆gt; div> div> DIV：第n的式（2）