Question

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

我有以下（简化）HTML：

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

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

如果CSS无法以跨浏览器兼容的方式实现这一点，那么适当的jQuery选择器会是什么？如果有人想要回答这两种情况，但我的偏好是CSS，那么无论如何都可能有帮助。

感谢。

Answer 1

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

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

此CSS选择器应该可以在IE7 +和其他浏览器中使用：

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

jQuery当前没有在其选择器引擎中实现名称空间，因此如果您需要将其用于脚本，则可以直接删除该选择器。

Answer 2

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

使用jquery：

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

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

2 个答案: