css深度选择器deep

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)在父组件中想要修改子组件内部的样式 (注意不是子组件自己哈,而是子组件内部的样式(子组件的子组件)。因为子组件就在父组件里面是可以修改的。 )

 

转载请说明出处内容投诉
CSS教程_站长资源网 » css深度选择器deep

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买