似乎无法使用 nth-child 定位元素答案

【问题标题】：Can't seem to target element with nth-child似乎无法使用 nth-child 定位元素
【发布时间】：2017-09-28 05:58:04
【问题描述】：

我正在尝试定位一个没有 ID 或类的 div，nth-child 似乎非常适合这个，但我似乎无法让它工作。我什至在 Safari 的网络检查器中复制了确切的选择器，但使用它仍然没有效果。这是我所看到的，在检查器中突出显示了所需的 div。

我想消除票务框底部不需要的空间（就在“添加到购物车”按钮下方）-“div.card”下的第三个 div。我还添加了一些不是覆盖的额外样式，只是为了确保我到达了正确的 div，但它们没有显示。

Web Inspector 提供的选择器是

#widget > event-ticket-widget > div > div.card > div:nth-child(3)

但它根本不起作用，我在这里碰壁......希望有人能指出我正确的方向。

谢谢！

【问题讨论】：

标签： css

【解决方案1】：

新答案：

我刚刚意识到这个元素在 iFrame 中。您不能通过 CSS 影响 iFrame 的内容！

但是对于这种特殊情况有一种解决方法：您可以对该 iFrame 的包装器应用负边距，这会降低它的高度：

#elevent-ticket-widget {
    margin-bottom: -150px;
}

如果您只想将其应用于特定页面，您可以将 page-id 类添加到选择器：.postid-3896 #elevent-ticket-widget { ... }

【讨论】：

感谢 Johannes，但由于某种原因，我尝试这样做没有产生任何结果...#widget div.container-fluid.position-relative.no-padding > div.card > div:nth-child(3) { height: 1em !important; border-bottom: 2px solid green; } 事实上，我什至在（safari）Web 检查器中的任何地方都没有看到这个 CSS。是什么赋予了？ BTW，实际链接是：vjff.org/events/event/and-then-she-arrived
我在您的屏幕截图中看到了链接，已经转到页面并在浏览器工具中使用该选择器添加了一个新规则，并且它有效（在 Firefox 中），所以我真的想知道...
啊，我刚刚发现所有内容都在 iFrame 中！您不能通过 CSS 影响 iFrame 的内容！但是有一种可能性/解决方法：我会在一分钟内将其添加到我的答案中。
我希望有这个解决方法！随时通知我...谢谢！