如何在 div 的第二个 FB 标签中选择第一个 IFRAME？答案

【问题标题】：How can I select the first IFRAME within the second FB tag in a div?如何在 div 的第二个 FB 标签中选择第一个 IFRAME？
【发布时间】：2011-06-24 22:00:38
【问题描述】：

这需要至少与 IE 7/8 和其他主要的当前浏览器兼容。

我有以下（简化的）HTML：

<div id="facebook">
    <fb:like ...... />
    <fb:comments>
        <iframe .... />
    </fb:comments>
</div>

IFRAME 是由 Facebook 添加的，但我需要对其进行显示修改。如何使用 CSS 选择器选择“div 下第二个 FB 标记中的第一个 IFRAME，ID 为 facebook”？我需要向 IFRAME 添加高度和溢出 CSS 属性。

如果 CSS 无法以跨浏览器兼容的方式实现这一点，那么合适的 jQuery 选择器会是什么？如果有人想同时回答这两种情况，可能会有所帮助，但我更喜欢 CSS。

谢谢。

【问题讨论】：

标签： jquery css jquery-selectors css-selectors

【解决方案1】：

这些不是fb 元素，它们是fb XML 命名空间中的like 和comment 元素。

完成这一切的 W3C 方法是在样式表中声明命名空间并使用特殊的选择器语法，如 in this answer 所示。但正如您所料，IE 不知道我在说什么，因此作为替代方案，您可以将命名空间视为元素名称的一部分，从而改为使用 fb:like 和 fb:comment。由于: 是 CSS 选择器（伪类和伪元素）中的一个特殊字符，因此您只需使用反斜杠对其进行转义，以便从字面上看到它。

这个 CSS 选择器应该可以在 IE7+ 和其他浏览器中工作：

#facebook fb\:comments iframe:first-child {
    /* Styles */
}

jQuery 目前没有在其选择器引擎中实现命名空间，因此如果您需要将该选择器用于脚本编写，您可以直接将其放入。

【讨论】：

【解决方案2】：

我不确定是否可以使用 CSS，即使它不兼容 IE7。

使用 jquery：

var iframe = $("#facebook").children().eq(2).find("iframe").first();
iframe.css({overflow: [...], height: [...]});

【讨论】：