如何调整Skulpt生成的HTML代码输出的黑底白字CSS样式

我来帮你搞定这个问题！你遇到的核心问题是原生CSS不支持嵌套选择器，加上之前的CSS语法有错误，导致输出文字的白色样式根本没被浏览器识别。

问题分析 #

你之前写的CSS里有两个关键错误：

1. 嵌套写法.running { pre { ... } }是Sass/Less这类CSS预处理器的语法，普通浏览器原生不支持，所以pre的样式完全没生效。
2. 无效的p: color:white;规则：语法错误（正确写法是p { color: white; }），而且你的输出内容在<pre>标签里，不是<p>，这条规则完全没用。

修复方案 #

你可以选择以下两种方案中的任意一种，都能让输出文字变成白色：

方案1：使用后代选择器（保持类关联）

把嵌套的pre样式拆成独立的后代选择器，这是原生CSS支持的写法：

<style>
.running { 
  border: 20px outset black; 
  background-color: black; 
  text-align: center;
}
/* 针对.running容器内的pre元素设置样式 */
.running pre {
  color: white;
  white-space: pre-wrap !important;
  display: block;
  font-family: monospace;
  margin: 1em 0;
}
</style>

方案2：直接使用ID选择器（更精准，优先级更高）

因为你的输出pre标签有唯一IDoutput，直接用ID选择器定位会更可靠，避免被其他样式覆盖：

<style>
.running { 
  border: 20px outset black; 
  background-color: black; 
  text-align: center;
}
/* 直接定位到输出的pre元素 */
#output {
  color: white;
  white-space: pre-wrap !important;
  display: block;
  font-family: monospace;
  margin: 1em 0;
}
</style>

为什么这样有效？ #

当你点击Run按钮时，Skulpt会把Python代码的输出内容插入到<pre id="output">标签中。现在我们通过正确的CSS选择器给这个标签设置了color: white，同时父容器.running的背景是黑色，就能实现黑底白字的效果了。

替换掉你原来的<style>代码，再运行测试一下，输出文字应该就能正常显示为白色啦！

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