关于vue页面样式元素修改的总结，根据chrome浏览器开发者模式以及VsCode去更改vue页面底层样式。

问题描述：

今天做vue页面，发现到element-ui上面复制的代码，有一些看着很别扭，强迫症的想修改一下样式，比如下面这个多选框上面的第一个不跟下面对齐我就很犯强迫症，当然这不只是这一个地方，很多时候我们也需要根据页面修改样式或者添加样式，那么我们以后要怎么举一反三的应对呢？

---

解决方案：

废话不多说，我们直接上解决方案：

1、我们直接打开chrome浏览器的开发者模式，我觉得非常适合我们这种新手，从下面我们就可以很明确的根据对应的区域去查看对应的样式。

2、并且，我们还可以根据对应的区域去更改对应的样式去模拟场景，但是，自己VsCode的代码还不会改变，你在这里更改样式刷新浏览器之后还是会恢复原样。

 3、于是，在不断查找资料和测试之后发现了一种解决问题的方法——直接找到底层css进行修改。

4、我们把鼠标放到这个css样式名称上面，他自动会给你显示一个路径出来，这就是该样式对应的样式表。

 5、我们根据这一条路径去寻找可以发现，真的有这个样式表存在，但是这么多的密密麻麻的字，我们又该怎么才能找到对应的样式呢。

 

 6、查找资料发现，VSCode自带了查找功能，我们根据浏览器上面的样式名称就可以查找到对应的区域，如图所示，先找到对应的样式名称，然后打开VSCode的搜索查找。

 7、第一步直接把名称输入复制上去，第二步点击我们要包含的文件，这样子我们就可以筛选我们需要的文件了，第三步根据查找出来的结果点击查看，第四步根据浏览器上面的样式对应该查找的结果，一目了然就可以发现我们要找的结果是否正确了。

 8、修改我们需要的样式，保存，刷新浏览器查看效果。

 9、问题解决！！

 10、这看起来有一点傻瓜式，但是真的非常适合我们新手测试、修改一些vue页面样式，非常好用！希望对大家有一点点帮助。