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

Question

这需要至少与 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，无论如何都可能会有所帮助。

谢谢。

Answer 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 目前没有在其选择器引擎中实现命名空间，因此如果您需要使用它来编写脚本，您可以直接将选择器放入。