如何修改单个Showit画布的背景颜色？已尝试选择器但未生效

问题原因 #

你之前的CSS代码失效，核心问题是用了Showit动态生成的类名（比如sb-nd-dH），这类带随机字符的类名会在页面刷新、编辑后变化，导致选择器匹配不到目标元素；同时选择器的类名组合也不符合元素实际的类结构。

正确的CSS代码 #

针对你的#section-one区域，用静态选择器定位背景容器即可生效：

<style>
#section-one .sb-background-container {
  background-color: #000 !important;
}
</style>

如果需要直接针对画布本身设置，可改用：

<style>
#section-one .sb-canvas {
  background-color: #000 !important;
}
</style>

通用定位与复用方法 #

1. 定位目标元素：打开浏览器开发者工具（按F12），右键点击目标画布区域选择「检查」，在Elements面板里找该区域的固定id或静态类名（避开带随机字符的动态类名）。
2. 编写稳定选择器：优先用页面里固定的section id（比如#section-one、#hero）搭配Showit通用静态类名（比如.sb-background-container、.sb-canvas），既保证选择器优先级，又不会因动态类名失效。
3. 复用至其他区域：只需替换选择器中的section id即可，比如给#section-two设置黑色背景：

<style>
#section-two .sb-background-container {
  background-color: #000 !important;
}
</style>

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