Mac Safari一键注入CSS，HTML页面实时变身！

可通过启用开发菜单、用户样式表或书签脚本在Mac的Safari中注入自定义CSS：1、开启开发菜单后使用Web检查器实时添加CSS；2、启用用户样式表并指定本地CSS文件以全局自动应用样式；3、创建JavaScript书签，点击即可动态插入CSS，实现快速页面美化。

如果您希望在Mac上的Safari浏览器中快速为任意HTML页面注入自定义CSS样式，从而实现页面外观的实时改变，可以通过启用开发功能并使用用户样式表来实现。以下是几种可行的操作方法：

一、启用Safari开发菜单并手动注入CSS

通过开启Safari的开发调试功能，您可以直接在网页检查器中添加CSS规则，立即查看样式变化效果。

1、打开Safari浏览器，点击顶部菜单栏的Safari → 设置 → 高级，勾选“在菜单栏中显示开发菜单”。

2、访问目标网页后，点击菜单栏中的开发 → 进入Web检查器，切换到“元素”标签页。

立即学习“前端免费学习笔记（深入）”；

3、在HTML结构面板中右键点击任意元素，选择添加属性 → style，或在右侧样式面板直接输入自定义CSS代码。

4、修改完成后，页面将实时渲染新样式，可即时预览视觉效果。

二、使用用户样式表自动注入全局CSS

通过配置Safari的用户样式表功能，可以让指定的CSS文件在每次加载网页时自动应用，实现一键批量美化。

1、前往Safari → 设置 → 高级，确认已启用开发菜单。

2、点击菜单栏开发 → 用户样式表 → 启用用户样式表。

Glean

Glean是一个专为企业团队设计的AI搜索和知识发现工具

117

查看详情

3、点击选择样式表文件，创建一个本地CSS文件（如custom.css），并在其中编写所需样式规则。

4、保存设置后，所有兼容的网页将在加载时自动应用该CSS文件中的样式，无需重复操作。

三、利用书签脚本快速注入CSS代码

通过将CSS注入逻辑封装为JavaScript书签，可在任意页面点击书签即可完成样式注入，操作更便捷。

1、创建一个新的书签，将其名称设为注入CSS，地址栏输入以下代码：

javascript:(function(){var d=document,s=d.createElement('style');s.type='text/css';s.appendChild(d.createTextNode('body{background:#f0f0f0 !important;}'));d.head.appendChild(s);})()

2、访问任意网页后，点击该书签，JavaScript将动态创建style标签并插入页面头部。

3、页面会立即应用内联样式，背景色等外观将按代码定义发生变化。

4、可根据需要修改书签中的CSS内容，实现不同主题或布局的一键切换。

以上就是Mac Safari一键注入CSS，HTML页面实时变身！的详细内容，更多请关注php中文网其它相关文章！