如何用CSS选择器访问iframe内#document中的body并设置样式？

首先得明确两个核心问题：

• 你之前用的#twitter-widget-0 > #document body选择器无效，是因为#document只是浏览器开发者工具里显示的文档节点标识，根本不是CSS能识别的合法选择器。
• 主页面的CSS无法直接作用于iframe内部的元素——iframe是一个独立的文档上下文，CSS的作用域到不了里面，所以不管怎么写选择器都没用。

接下来分两种场景给出解决方案：

场景1：iframe和主页面同域（域名、协议、端口完全一致） #

这种情况下可以通过JavaScript操作iframe内部的DOM来设置样式：

// 获取目标iframe元素
const iframe = document.getElementById('someid');
// 必须等iframe加载完成后再执行操作
iframe.onload = function() {
  // 获取iframe内部的body节点
  const iframeBody = iframe.contentDocument.body;
  // 直接设置单个样式
  iframeBody.style.width = '75%';
  
  // 如果需要批量设置样式，插入样式表更灵活
  const styleSheet = document.createElement('style');
  styleSheet.textContent = `
    body {
      width: 75%;
      /* 可添加其他需要的样式 */
      margin: 0 auto;
    }
  `;
  iframe.contentDocument.head.appendChild(styleSheet);
};

场景2：iframe和主页面跨域 #

如果iframe加载的是其他域名的内容，出于浏览器同源策略的安全限制，你无法通过主页面的CSS或JS修改iframe内部的样式，除非目标页面配置了允许跨域的相关设置（且需要对方配合），否则这个需求无法实现。

内容的提问来源于stack exchange，提问作者Ricola