Question

我正在尝试在CSS中设置外部<body>标记的背景图片：

<html>
 <body>
  ...
   #document
    <html>
     <body>
     </body>
    </html>
  ...
 </body>
</html>

但是，我甚至无法选择其中一个<body>标签而不影响另一个。他们没有ID，当我尝试通过子选择器选择#document使事情变得复杂时（我甚至不知道它是什么）。如果我尝试类似body html body {...}的内容，#document就像一个我无法通过的障碍，因此它不会选择内部正文标记。

有关如何选择其中一个body标签的任何想法？

Answer 1

给定的列表似乎是DOM检查器视图。在这种情况下，#document不引用id为“document”的任意元素 - 它指的是<iframe>中托管的文档（请参阅Node.nodeName）。您可以在Firefox和Chrome的DOM检查员中看到这一点;实际上，您甚至可以通过将浏览器指向data:text/html,<iframe>，打开检查器并展开<iframe>节点来立即尝试。 IE也显示嵌套树，但没有#document标记。

如果您看到背景图片从主文档流失到iframe，则表示iframe中的文档没有自己的背景。

选择器无法穿透多个/嵌套文档树;它们已本地化为上下文文档。这意味着您无法在包含<iframe>的文档中定位<iframe>内托管的文档中的元素。如果您需要将样式应用于<iframe>内的文档中的元素，则需要在该内部文档中直接应用CSS，并且选择器的编写就好像您只使用该文档一样。

在一个不太可能的事件中，给定的列表是实际的源标记而不是DOM检查器视图，而#document实际上是id为“document”的任意元素，那么你的内部{{1已经注销了{}和<html>元素，因为HTML DOM一次只能包含一个<body>和一个<html>元素;这些将是你的外在的，而不是内在的。在这种情况下，您可以尝试选择<body>并将背景应用于该背景，但不能保证它能正常工作。

Answer 2

您正在考虑的是<head></head>和#document标记内的<iframe></iframe>标记，包括<link rel="stylesheet" type="text/css" href="Null.css">。如果您希望通过嵌入和更改来改变它，那么您将需要jQuery，但是jQuery没有任何保证，因为首先，您需要知道放置它的位置，其次，如果有多个东西使用它，它可能不起作用包含iframe的页面上的相同ID /类以及iframe内的文档。

Answer 3

使用Jquery

您可以使用jQuery的.content（）函数来访问它。

$('yourIframe').contents().find('#yourItemYouWantToChange').css({
    background: 'red'
});

如何在CSS中的#document中选择元素？

3 个答案: