然后选择页面上的一个元素 .. 在右边这里，styles 面板上会显示对应的样式 .. 点击这块样式的出处 .. 会打开 Sources 选项卡 ..

左边是一个目录结构 .. 右边会显示打开的文件，这里已经给我们打开了 style.css 这个文件，而且定位到了刚才我们看到的那块样式 ..

在这里你可以去编辑样式 .. 效果会实时的显示出来 ... 如果你得到了满意的效果以后，想要保存到对应的样式表里 .. 可以使用 Workspace 这个东西 ..

选中这个 localhost:3000 ，这是我们给项目创建的一个本地服务器 ..

然后再按一下这个 Add Folder to Workspace ，把这个目录添加到工作空间里边儿 .. 这样会弹出一个对话框让我们选择对应的目录 .. 我这里就是桌面上的这个 ninghao-web ..

浏览器会提醒我们是否允许访问文件系统里的这个目录，也就是刚才我们手工选择的目录 .. 点击 允许 ..

现在，在这个 Sources 里面，会出现两个主要的目录，一个是 localhost:3000 .. 下面这个是 ninghao-web ..

这个 localhost:3000 下面的 styles 目录下的 style.css ，对应的就是 ninghao-web 这个目录下面的 styles 目录下的 style.css ..

这里我们还得告诉一下浏览器它们的关系 .. 选中 localhost 里面的 style.css .. 右键点击，选择 Map to File System Resource ..

在出现的这个窗口里，你要找到跟这个文件对应的，在本地文件系统里的那个文件 .. 也就是 ninghao-web下面的 styles 目录里面的 style.css 这个文件 ...

这回这个边栏上就只剩下 ninghao-web 这个目录了 .. 打开 styles 下面的这个 style.css .. 这里我们可以直接编辑这个文件 ... 添加一个 color，设置一下文字颜色 .. 注意页面的变化是实时的，而且不会刷新整个页面 ..

command + S ，可以保存一下修改 .. 再刷新一下页面。 这个元素里的文字颜色会保留住 .. 再回到我们用编辑器打开的项目 .. 你会看到，刚才我们在浏览器里的修改，已经保存到了本地的文件系统上了 ..