uWeb 中文文档 下载 App

用户样式——全局 CSS 与域名特定样式 sitecss

样式扩展体系

如果说脚本是"行为定制"，那样式就是"外观定制"。uWeb 的样式扩展和脚本一样，分为全局和域名特定两层，形成一个完整的样式控制矩阵。

sitecss/：域名特定样式

sitecss/ 目录的用法和 sitejs/ 完全对称——以根域名命名的 CSS 文件自动应用到对应域名的页面上：

sitecss/
├── github.com.css          # GitHub 的深色模式覆盖
├── baidu.com.css           # 百度首页简化样式
├── default.css             # 默认样式（兜底）
└── night.css               # 夜间模式

匹配规则

启用条件

  1. 样式文件已放入 sitecss/ 目录
  2. 长按窗口管理按钮，勾选"使用网址用户样式"
  3. 强制清空后台重启 uWeb

示例：GitHub 深色模式增强

/* sitecss/github.com.css */
/* 覆盖 GitHub 原生主题里的刺眼白色元素 */
:root {
    --bg-color: #0d1117;
    --fg-color: #c9d1d9;
}

body {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
}

.comments-list .comment {
    background-color: #161b22 !important;
}

/* 移除某些不必要的边框 */
.BorderGrid {
    border: none !important;
}

sitecss/ 下的 .js 文件

这个是 uWeb 独有的特性：sitecss/ 目录下以根域名命名的 .js 文件，会在页面 HTML 解析前第一时间注入执行——比 sitejs/ 的脚本更早。这对于：

特别有用。

sitecss/
├── github.com.css          # 样式覆盖
└── github.com.js           # HTML 解析前执行的前置脚本

default.css：兜底样式

如果访问的域名在 sitecss/ 里没有匹配的 CSS 文件，且 sitecss/ 下存在 default.css，则自动应用 default.css。这个兜底机制让你可以：

用 default.css + 空文件实现精准夜间模式

这是一个很巧妙的组合用法：

  1. default.css 写全量夜间模式样式（* { background-color: #111 !important; color: #eee !important; } 等）
  2. sitecss/ 下对黑色主题的网站（如 github.com.css）放空文件或浅灰色背景
  3. 效果：只有白色/浅色主题的网站被 default.css 切成夜间模式，原本就是深色的网站不受影响

night.css：自定义夜间模式

uWeb 内置了夜间模式实现，勾选后自动应用。如果你觉得内置的效果不够好，可以放一个 night.css 到 sitecss/ 目录下，它会替代内置实现，完全由你控制夜间模式的样式细节。

这个文件在"使用网址用户样式"开启时生效，可以写得比内置实现精确得多。

css/：全局样式目录

css/ 目录是所有网站共享的全局样式。和 default.css 类似但位置不同——default.css 在 sitecss/ 里做"域名兜底"，css/ 里的样式是无条件的全局应用。

css/
├── global-font.css         # 全局字体修改
├── bigger-text.css         # 统一增大字号
└── remove-animations.css   # 移除所有动画

可以放多个文件，按文件名顺序加载叠加。

优先级总结

uWeb 的样式应用顺序（后加载的覆盖先加载的）：

  1. 浏览器内置默认样式
  2. 页面自身的 <style> 和 <link> 样式
  3. css/ 目录下的全局样式
  4. sitecss/ 下匹配域名的 CSS 文件
  5. default.css（如果前面没匹配到域名特定样式）
  6. 页面内联 style 属性

配合 JS 屏蔽不良元素

长按底部工具栏 JS 按钮 → 执行"标记不良元素"菜单 → 点击页面任意元素 → 弹出对话框显示该元素及所有祖先的属性信息 → 自动生成 CSS 屏蔽代码。

生成的 CSS 默认用 display:none 屏蔽。如果元素显示属性里已经出现过 display，则建议改用 transform:scale(0)!important 屏蔽——某些网站脚本会反复重置 display 属性。

下一章