safari提供三种精准控制css的方法：1. 内置样式表功能（macos专属），绑定url前缀，轻量持久；2. 阅读器模式书签脚本（跨平台），需手动触发且仅限阅读器模式；3. safari扩展动态匹配域名（最灵活），支持子路径、持久生效并绕过csp。
你想让某个网站显示得更清晰、排版更顺眼，或者彻底隐藏干扰元素，但又不想影响其他网页——这时候必须精准控制CSS只对特定网页生效，而不是全局覆盖。
用Safari内置样式表功能（仅限macOS）
这是最轻量、无需安装任何工具的方法，适合对单个网站做小范围调整，比如放大某新闻站的正文、隐藏某电商页的促销横幅。
1、先确保已开启开发菜单：Safari浏览器 → 偏好设置 → 高级 → 勾选“在菜单栏中显示‘开发’菜单”。
2、打开目标网页（例如 https://example.com/news ），顶部菜单栏点击“开发” → “显示网页检查器” → 切换到“样式”标签页。
3、点击检查器底部的“+”号 → 新建一个空白样式表 → 粘贴如下代码（以隐藏某网站右侧广告栏为例）：
https://example.com/news * { font-size: 16px !important; }<br>https://example.com/news .ad-sidebar { display: none !important; }
4、按回车确认。注意：Safari会自动将这段CSS绑定到当前网页URL前缀，关闭检查器后仍长期生效，直到你手动删除该样式表。
通过阅读器模式书签脚本注入（跨平台通用）
这个方法不依赖系统权限，iOS和macOS都能用，特别适合临时调试或快速验证规则是否有效，但只在阅读器模式下起作用。
方法一：创建JavaScript书签脚本
1、新建一个书签，网址栏粘贴以下内容（把其中的CSS规则替换成你要的）：javascript:(function(){var s=document.createElement('style');s.textContent='*{font-size:18px!important;line-height:1.5!important;}';document.head.appendChild(s);})();
2、访问目标网页 → 点击地址栏左侧四行横线图标进入阅读器模式 → 点击刚保存的书签。
3、样式立即应用。这一步操作起来很简单，直接点一下就行，但【必须先进入阅读器模式，否则脚本无法注入】。
使用Safari App Extension动态匹配域名
这是唯一能实现“精确到子路径+持久生效+绕过CSP”的方案，适合需要长期维护多个网站样式的用户，比如设计师、前端开发者或信息无障碍需求者。
第一步：准备CSS文件
1、用“文本编辑”新建纯文本文件 → 输入你的CSS规则，例如：@-moz-document domain("github.com") { .repository-meta-content { font-size: 15px !important; } }
2、保存为 【github-fix.css】，后缀必须是.css，编码选UTF-8。
第二步：配置扩展权限
3、打开Safari偏好设置 → 扩展 → 找到你安装的CSS注入类扩展（如“Stylus for Safari”或自建扩展）→ 点击“设置”。
4、在域名白名单中添加 【*.github.com】，不要漏掉星号和点，否则子页面不生效。
第三步：启用并验证
5、刷新github任意页面 → 打开Web检查器 → Elements面板中搜索
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
