使用object标签加载本地txt后CSS设置pre文本颜色不生效问题

问题根本原因 #

<object> 标签加载的外部资源会生成独立的浏览上下文，和父页面的DOM完全隔离，父页面的CSS规则无法穿透到<object>内部的文档中，所以你在父页面写的.notatki pre选择器匹配不到object内部的pre标签，样式自然不生效。
你在浏览器元素检查器中可以看到内部的pre标签，是因为调试工具支持展示嵌套上下文的完整DOM结构，不代表父页面的CSS选择器可以跨上下文匹配到内部元素。

可行解决方案 #

方案1：改用Fetch读取文本直接插入父页面（最推荐） #

直接读取txt文件内容插入到当前页面的标签中，完全在父页面DOM上下文内，样式可以直接控制：

1. 替换原有HTML代码：

<div class="notatki">
    <pre class="content" id="txtContent"></pre>
</div>

2. 加入JS读取文件内容：

// 替换为你的txt文件本地路径
const txtPath = 'C:\\Users\\kacpi\\OneDrive\\Dokumenty\\lekcje\\strony internetowe\\4\\notatki\\chemia.txt'
fetch(txtPath)
  .then(res => res.text())
  .then(text => {
    document.getElementById('txtContent').textContent = text
  })

3. 你原有CSS规则无需修改，直接生效。

方案2：继续使用object，手动操作内部DOM #

如果你必须保留<object>的实现方式，可以在object加载完成后，访问其内部文档修改样式：

<div class="notatki">
    <object class="content" id="txtObject" data="C:\Users\kacpi\OneDrive\Dokumenty\lekcje\strony internetowe\4\notatki\chemia.txt">Not supported</object>
</div>
<script>
const txtObj = document.getElementById('txtObject')
txtObj.addEventListener('load', () => {
  // 获取object内部的document对象
  const innerDoc = txtObj.contentDocument || txtObj.contentWindow.document
  // 选中内部pre标签修改样式
  const innerPre = innerDoc.querySelector('pre')
  if (innerPre) {
    // 单条样式直接修改
    innerPre.style.color = 'white'
    // 也可以批量插入样式规则到内部文档
    const style = innerDoc.createElement('style')
    style.textContent = 'pre { color: white; line-height: 1.5; padding: 10px; }'
    innerDoc.head.appendChild(style)
  }
})
</script>

注：本地私有应用如果遇到文件访问权限限制，可以给浏览器添加对应启动参数放行，比如Chrome添加--allow-file-access-from-files参数即可。

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