如何使用CSS修改Google Sheets灰色区域背景并定位对应元素

你遇到的“样式闪一下就失效、找不到目标元素”的问题，是新版Google Sheets的DOM结构特性导致的，和Stylish扩展的运行状态无关，核心原因有两个：

1. Google Sheets把核心编辑区的DOM做了Shadow DOM封闭，普通元素选择器穿透不到这层的背景层级，顺着DOM树逐层查找的时候，很容易被嵌套的网格容器绕到内部单元格上，根本定位不到外围灰色区域的真正宿主元素。
2. 你之前选的#docs-edit-container、.grid-container这类上层容器本身是全透明/半透明的，设置的红色是容器初始挂载时的临时样式，等编辑器初始化完成后，JS会自动把这几个容器的背景重置为透明，露出下层原生的灰色背景，就造成了“闪一下红色就变回灰色”的现象。

可直接生效的CSS代码 #

/* 保留你已经调试正常的顶部区域样式 */
#docs-chrome {
  background: #00ff00 !important;
}

/* 清除之前设置的错误红色样式，避免闪烁 */
#docs-edit-container, 
#docs-editor, 
.grid-container {
  background: transparent !important;
}

/* 把遮挡在灰色区域上层的所有半透明容器全部设为透明，露出底层元素 */
/* 加!important是为了覆盖Google Sheets初始化后注入的内联样式 */
#grid-wrapper,
.docs-sheet-container,
#formula-bar,
.cell-input-container {
  background: transparent !important;
}

/* 真正承载外围灰色背景的元素，设置纯黑#000背景 */
.docs-application,
#sheets-app-container,
body {
  background: #000000 !important;
}

快速定位目标元素的小技巧 #

如果后续还需要调整其他区域的样式，不要顺着DOM树逐层查找，很容易被Shadow DOM的嵌套结构绕晕：

• 直接打开Devtools的元素选择器，点选截图里红圈标注的灰色区域（注意不要点到表格内的单元格网格），Devtools会自动跳转到对应的真实元素位置，不会被Shadow DOM结构遮挡。
• 如果点选后看到目标元素的计算样式里显示的是透明，就顺着父节点往上找1-2层，直到在“计算样式”面板里看到带有background-color: rgb(235, 235, 235)的灰色值，就是你要找的目标元素。

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