求助：Stylebot自定义Google Sheets网格线CSS失效问题

原因分析 #

• Google Sheets采用动态DOM渲染：加载新表格或切换视图时，页面会通过内部JS重新生成表格元素并覆盖原有样式，导致自定义CSS仅在初始加载时短暂生效。
• CSS选择器优先级不足：你编写的选择器权重低于Sheets内置的样式规则（比如内联样式、多层嵌套的类选择器），被系统样式覆盖。
• 元素标识不稳定：Sheets的表格元素类名或DOM结构在动态更新时可能发生变化，导致原有选择器无法匹配新生成的元素。

解决方案 #

1. 提升选择器优先级（最直接有效） #

使用更具体的选择器，并通过!important强制覆盖内置样式（仅在必要时使用，避免样式冲突）：

/* 增强选择器特异性，确保优先级高于内置样式 */
div.sheet-container .waffle td, div.sheet-container .grid-fixed-table td {
  border: 1px solid #000 !important;
  border-collapse: collapse !important;
}

或者针对边框属性单独设置，更精准：

.waffle td, .grid-fixed-table td {
  border-color: #000 !important;
  border-width: 1px !important;
  border-style: solid !important;
}

2. 匹配动态生成的元素 #

尝试直接绑定到表格的根容器，确保样式能继承到后续生成的元素：

/* 绑定到表格根容器，让样式自动应用到内部动态生成的单元格 */
.grid-container {
  --grid-border-color: #000;
}
.grid-container .waffle td, .grid-container .grid-fixed-table td {
  border-color: var(--grid-border-color) !important;
}

3. 验证Stylebot的应用范围 #

打开Stylebot的设置，确保样式规则的匹配范围是所有Google Sheets文档（设置匹配规则为https://docs.google.com/spreadsheets/*），而非仅当前单个表格。

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