css中/deep/的使用
原创css中/deep/的使用
原创
用户9966982
发布于 2022-11-04 22:10:22
发布于 2022-11-04 22:10:22
vue中组件的样式是有作用域的，默认是全局样式。
如果不希望当前组件中的样式影响到别的组件，可以添加作用域。通过给style添加scoped,使它的css只作用于当前组件的元素。
<style scoped>
</style>在有作用域的组件中如何给子组件设置样式？
默认只能作用到子组件的根节点（组件的class 默认作用到组件的根节点）
使用子组件的根节点本身的class类名
如果是第三方组件，不知道它的根节点的类名，那就审查元素查看，或者添加一个类名
// APP.vue
<style scoped> //在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。
.hello {
border: 1px solid #000;
}
</style>但是
// APP.vue
<style scoped> //在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。
.hello {
border: 1px solid #000;
}
//在其中再设置HelloWorld 组件中h1的样式，没效果。
h1 {
color: red;
}
</style>此时
//APP.vue
<style scoped> //在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。
.hello {
border: 1px solid #000;
}
//深度作用操作符（/deep/）,可以使样式作用的更深
/deep/ h1 {
color: red;
}
</style>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读