位置: IT常识 - 正文
css深度选择器deep(css选择器nth)
编辑：rootadmin推荐整理分享css深度选择器deep(css选择器nth)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:深度选择器原理,css深度选择器三种写法,css深入,vue 深度作用选择器,深度选择器原理,scss 深度选择器,scss 深度选择器,css深度选择器,内容如对您有帮助，希望把文章链接给更多的朋友！
1.为什么要有deep
1.当我们给组件设置scoped的时候，此时我们组件的css样式只会对自己的内容生效，不会对子组件里面的内容生效。
<style lang="scss" scoped>.login-page { min-height: 100vh; background: url(@/assets/login-bg.svg) no-repeat center / cover; display: flex; align-items: center; justify-content: space-around; .el-card { width: 420px; /* 这个选择器不生效 */ .el-card__header { height: 80px; background: rgba(114, 124, 245, 1); text-align: center; line-height: 40px; color: #fff; font-size: 18px; } } .el-form { padding: 0 20px; } .tc { text-align: center; }}</style>顶部没有效果
2.deep作用： 深度选择器（也有少数人叫穿透选择器）
让父组件向下影响到子组件内部的样式
3.deep语法
::v-deep (scss)
/deep/ (less)
.el-card { width: 420px; /* 深度选择器 */ ::v-deep .el-card__header { height: 80px; background: rgba(114, 124, 245, 1); text-align: center; line-height: 40px; color: #fff; font-size: 18px; } }
deep使用小结
1.deep作用：让父组件向下影响到子组件内部的样式
2.deep应用场景：如果组件没有设置scoped，则vue就不会加自定义属性。你的css选择器会对当前页面任何元素生效，自然就需要deep了。
（1）父组件使用了scoped
（2）在父组件中想要修改子组件内部的样式 (注意不是子组件自己哈，而是子组件内部的样式(子组件的子组件)。因为子组件就在父组件里面是可以修改的。 )
上一篇：VUE3 数据的侦听(vue3当中如何监听新增的属性)
下一篇：Java使用WebStocket实现前后端互发消息(java使用循环结构输出九九乘法表)
