最近vue开发，遇到一个页面样式上的问题，单选框和多选框的样式显示问题，看下图片吧：
这是官方组件的显示效果，项目效果需求如下图
找了很多资料，最后终于解决了，边看代码边解释吧：
```css
这里的.right是我自定义的类名，父盒子，我的单选组是直接放在这个盒子里面的，下面的写法是vue的scss写法，不懂得可以先去了解一下；
.right{
width: 40%;
border-bottom: 1px solid #cacaca;
/deep/{
.el-radio{
//从这里开始 就是更改颜色的代码，将你的颜色 改掉我的颜色就可以了
.el-radio__label{
color: #000 !important;
}
.el-radio__input{
margin-bottom: px(5);
&.is-checked {
.el-radio__inner{
background-color:#28D4C1;
border-color:#28D4C1;
}
}
.el-radio__inner{
&:hover{
border-color:#28D4C1;
}
}
}
}
}
}
```
```css
//这里是复选框的样式写法，同上一样
/deep/{
.el-checkbox{
//从这里开始 就是更改颜色的代码，将你的颜色 改掉我的颜色就可以了
.el-checkbox__label{
color: #000 !important;
}
.el-checkbox__input{
margin-bottom: px(5);
&.is-checked {
.el-checkbox__inner{
background-color:#28D4C1;
border-color:#28D4C1;
}
}
.el-checkbox__inner{
&:hover{
border-color:#28D4C1;
}
}
}
}
}
```
/deep/的意思大概为深入的，深远的。无意中看到css中有关于这种写法，开始没太注意 ，以为是组件css的写法，后来才发现不是。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存在着一个问题，比如你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。
例如我在一个商城的项目使用了mint-ui的radio组件，此时mint-ui已经有默认的样式了，我可以通过提取公共文件的方式来修改，以达到自己想要的，但是同时其他地方也会受到影响
与此同时我只想要修改这个地方的样式，在其他页面用到mint-ui的时候不变，我就可以用/deep/了
好了，里面的颜色和样式修改根据个人需求来，我这里就不多做解释了哈，希望对你们有帮助！
