在Mac上用Safari检查网页元素并实时修改CSS样式需先启用开发者功能：Safari→设置→高级→勾选“在菜单栏中显示‘开发’菜单”；再用Option+Command+I打开检查器，在“元素”页双击样式值修改，或用选择器工具精准选取元素。

在Mac上用Safari检查网页元素并实时修改CSS样式，是前端调试最直接的方式，能立即看到布局、颜色、间距等变化效果，无需刷新页面或重新部署代码。

启用Safari开发者功能

这一步必须先完成，否则所有检查和修改功能都不可用。Safari默认隐藏开发工具，需手动开启入口。

1、点击屏幕左上角的【Safari】菜单 → 选择“设置”。
2、切换到“高级”标签页 → 勾选【在菜单栏中显示‘开发’菜单】。
3、关闭设置窗口，确认菜单栏最右侧已出现“开发”二字——若未出现，请重启Safari再试。

打开网页检查器

检查器是修改样式的主界面，它能实时映射页面结构与样式规则，支持双面板联动编辑。

方法一：快捷键直达
确保当前网页已加载完成 → 点击页面任意空白处获取焦点 → 按下 Option + Command + I，检查器立即在右侧展开。

方法二：菜单调用
点击顶部菜单栏“开发” → 选择“显示网页检查器”。
注意：如果当前网页是本地HTML文件（file://协议），部分CSS编辑功能可能受限，建议用http/https协议页面测试。

定位并修改CSS样式

检查器打开后，默认停留在“元素”标签页，左侧为DOM树，右侧为对应节点的样式面板。所有修改即时生效，但仅限当前会话。

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

① 在左侧DOM树中，点击任意HTML元素（如

、

），右侧样式面板自动同步显示该元素所有生效的CSS规则。
② 找到要修改的属性（例如color: #333），双击值部分（#333）→ 输入新值（如#e74c3c）→ 按回车确认，页面立刻变色。
③ 若某条规则被划掉（带删除线），说明它被更高优先级规则覆盖；可点击该行末尾的复选框禁用它，观察原始样式是否恢复。
④ 在样式面板底部“+”号旁点击，可新增一条自定义CSS声明，比如输入 margin-top: 20px，回车后即刻应用。

这一步操作起来很简单，直接双击就能改，但要注意：修改后的样式不会保存到服务器，刷新页面即消失。如需持久化，必须将代码复制回本地项目文件中。

使用选择器工具精准选取元素

当页面结构复杂、目标元素嵌套深或难以鼠标点击时，用视觉选择器最快。

1、在检查器右上角，点击图标形似鼠标箭头的按钮（“选择器工具”）。
2、鼠标移回网页，悬停任意位置，对应DOM节点会高亮显示；
3、单击目标元素，检查器自动跳转并聚焦到该节点及其全部样式。
4、此时可立即编辑右侧CSS，无需手动在DOM树里层层展开查找。

这个工具对浮动层、弹窗、下拉菜单等动态元素特别有用，避免因元素消失导致无法选中。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！