CSS关于/deep/的用法解释

vue 中组件的样式是有 作用域 的，默认是全局样式。

如果不希望当前组件中的样式影响到别的组件，可以添加作用域。通过给style 添加 scoped,使它的css只作用于当前组件的元素

<style scoped>

</style

/deep/

//APP.vue
<style scoped>
//在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。
.hello {
  border: 1px solid #000;
}
//深度作用操作符（/deep/）,可以使样式作用的更深
/deep/ h1 {
  color: red;
}
</style>
 

今天我遇到了一个问题，css 样式不生效问题

class="main" 定义 如何在css就不生效

 不加 /deep/ 就不生效   !important 优先级

.main /deep/ .el-tabs__item {
  font-size: 16px !important; // !important 优先级
  color: #303133 !important;  // !important 优先级
}