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 优先级
}