准备工具，浏览器一个，谷歌，ie,360浏览器都可以

打开一个网页，按 F12 ，点击元素模块里的html标签，这里我选中了 li 标签，最右侧的样式模块下方则显示了应用于该标签的样式

css样式排在最上面的说明css级别更高。

你可以在上面相应的css样式表进行样式的修改，也可以新增样式。修改过的样式就会在页面上即时显示。在方块1下面编写代码等同于行内样式，方块2所代表的是该样式在文件中的位置行数，把小鼠标移到方块2就可以看到具体文件地址。

想查看:hover这类隐形样式时，你可以强制它们显示

在编写页面的时候，发现写了样式，结果却不起作用时，想审查都有哪些代码影响时，你可以点击已计算模块，在这里你可以查看盒模型，也可以进行样式筛选，也可以看到具体属性被影响的css样式所在位置

元素模块里的元素标签里的内容也是可以修改的，比如在里面写行内样式，修改class的类型，甚至是修改文字也是可以的

ps:如果不知道去哪找页面来编写的话，可以关注我，会不定期分享纯前端的web,小程序、uniapp,vue等项目源码。