zoukankan      html  css  js  c++  java
  • /deep/ 深度作用选择器作用及使用

    之前在开发中遇到一个问题,vue项目结合 element ui 使用。

    但是 element ui 的样式不一定符合我们的需求,这时我们就需要改变它的样式。

    比如博主使用到了element ui 的对话框,我想要改变这个对话框标题的颜色,所以我需要在页面中审查元素找到对应的标签。

    但是当我找到并且复制,然后试图去改变它的样式时,怎么都没办法改变。

    我以为是权重的问题,所以我加 ! important,但是也毫无作用。

    当我审查元素发现此样式就没有作用到,就相当于它没有找到这个元素,所以也就不存在改不改变样式的问题了。

    这时我们就需要一个选择器能深度的帮助我们找到这个元素,比如 deep

    vue组件中,在 style 设置为 scoped 的时候,里面在写样式对子组件是不生效的,如果想让某些样式对所以子组件都生效,可以使用 /deep/ 深度选择器。

    这是我起初试图改变的方法(亲测无效):

    .focus .el-dialog__title{
      color:red !important
    }

    这是使用deep后的方法(亲测有效):

    .focus /deep/ .el-dialog__title{
      color:red;
    }

    原理就是通过找到父元素深度的找到我们需要改变的子元素,然后改变它的样式即可。

    若/deep/后有多层嵌套:

    /* 渲染前 */
      #app /deep/ button{
        background-color: yellow;
        span{
          color:blue;
        }
      }
    /* 渲染后 样式有效 */
    #app[data-v-7ba5bd90] button span {
        color: blue;
    }

    再换种写法 移动/deep/位置:

    /* 渲染前 */
      #app button{
        /deep/ span{
          color:pink;
        }
      }
    /* 渲染后 data-v-7ba5bd90是#app的属性 所以无效 */
    #app button[data-v-7ba5bd90] span {
        color: pink;
    }

    再换一种 又加个子元素:

    /* 渲染前 */
      #app button{
        span{
          /deep/ span{
            color:pink
          }
        }
      }
    /* 渲染后 */
    #app button span[data-v-7ba5bd90] span {
        color: pink;
    }

    综上可以看出.在哪里加的/deep/ ,data属性选择器就会跑到写的上一层去.

    若写多个/deep/:

    多个/deep/的情况下,只有最外层的/deep/有效,内层的其他/deep/都是无效的,写了也没意义,不建议写。

  • 相关阅读:
    POJ 3348 Cows (凸包面积)
    P4126 [AHOI2009]最小割
    P1903 [国家集训队]数颜色
    P3749 [六省联考2017]寿司餐厅
    CF666E Forensic Examination
    P2336 [SCOI2012]喵星球上的点名
    P1117 [NOI2016]优秀的拆分
    P3747 [六省联考2017]相逢是问候
    CF1062F Upgrading Cities
    P3243 [HNOI2015]菜肴制作
  • 原文地址:https://www.cnblogs.com/joe235/p/14566385.html
Copyright © 2011-2022 走看看