1.为什么要有deep
-
1.当我们给组件设置scoped的时候,此时我们组件的css样式只会对自己的内容生效,不会对子组件里面的内容生效。
文章来源地址https://www.toymoban.com/news/detail-400503.html
<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)在父组件中想要修改子组件内部的样式 (注意
不是子组件自己
哈,而是子组件内部的样式(子组件的子组件)
。因为子组件就在父组件里面是可以修改的。 )文章来源:https://www.toymoban.com/news/detail-400503.html
到了这里,关于css深度选择器deep的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!