/deep/和>>>和::v-deep

我们在style lang="scss"时经常用scoped属性实现组件样式私有化的时候，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，比如:

.conBox /deep/ .el-input__inner{
    padding:0 10px;
}

注意，VUE3.0下/deep/的使用可能会有报错
如果/deep/报错，可采用::v-deep，效果基本一样，有人说::v-deep能加快编译速度，但是我在网上没有找到相关资料，无从验证。

.conBox ::v-deep .el-input__inner{
    padding:0 10px;
}

深度作用选择器 >>>
（注意，只作用于css）
但如果是sass/less的话可能无法识别，这时候需要使用 /deep/和::v-deep 选择器。
想修改element-ui某个深层元素也有其他方式解决；
解决方法之一：除非你将 scoped 移除，或者新建一个没有 scoped 的 style（一个.vue文件允许多个style）

---

vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。

<-- less语法 -->

.wrap{

  .class1{

      font-size:12px;

  }

    /deep/ .class2{

       font-size:20px; //对所有子组件生效.

        /deep/ .class3{   }  //没有必要写多层deep 父类有deep后子类自动也会深度选择 并且这么写在firfox里会失效

    }

}

---

css关于/deep/的解释和用法

/deep/的意思大概为深入的，深远的。无意中看到css中有关于这种写法，开始没太注意 ，以为是组件css的写法，后来才发现不是。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存在着一个问题，比如你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。

例如我在一个商城的项目使用了mint-ui的radio组件，此时mint-ui已经有默认的样式了，我可以通过提取公共文件的方式来修改，以达到自己想要的，但是同时其他地方也会受到影响

与此同时我只想要修改这个地方的样式，在其他页面用到mint-ui的时候不变，我就可以用/deep/了

.mint-radiolist /deep/ .mint-cell {　
	　height: 1.312rem;　　
	　line-height: 1.312rem;　　
	　min-height: 1.312rem;　　
	　background: #fff;　　
	　border-bottom: solid 0.032rem #F2F2F2;
}
.mint-radiolist /deep/ .mint-cell-title {
　	margin-top: 0.3rem;
}
.mint-radiolist /deep/ .mint-radiolist-label {　
　	font-size: 0.406rem;　　	
　	color: #333333;
}
.mint-radiolist /deep/ .mint-radio-label {　
　display: inline-block;　　
　margin-top: 0.1rem;
}

声明一下哈 ，如果我在公共文件里面修改 .mint-cell 的样式的话就会影响到其他地方，不过像现在这样 就不会影响到其他地方了。
.mint-radiolist[data-v-f60eab44] .mint-radiolist-label

[data-v-f60eab44]表示了我子组件使用了scoped哈

当然在一些浏览器上可能会出现兼容性问题

.mint-radiolist >>> .mint-cell {

		height: 1.312rem;
		line-height: 1.312rem;
		min-height: 1.312rem;
		background: #fff;
		border-bottom: solid 0.032rem #F2F2F2;
}