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