深度选择器的使用_var(--el-color-primary)

深度选择器

深度选择器是让样式穿透使写在当前scpoed中的样式对子组件也会生效

vue2.x

/deep/ 
&::v-deep .a {
    
}
//这里写不写 & 都行。
1
2
3
4
5

vue3.x

/deep/
下面两种都可以（ "vue": "^3.0.0"）
&::v-deep(.a) {
    
}

&::v-deep .a {
    
}
1
2
3
4
5
6
7
8
9

  .nav {
    height: 10px;
    & &-item {
      font-size: 10px;
    }
  }
  
	编译生成下面css：
	
	nav {
	height: 10px;
  }
  .nav .nav-item {
    font-size: 10px;
  }

-----------------------
    li {
      :hover {
        color: #FFFFFF;
        background-color: #ec808d;
      }
    }
	编译生成下面css:(
	li :hover {
    color: #FFFFFF;
    background-color: #ec808d;
  }

:hover前面有个空格，所以这里使用&父选择器)
如下：

li {
&:hover {
    color: #FFFFFF;
    background-color: #ec808d;
 }   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

没生效的原因和解决方案

搞了很久后，找到资料说，是由于vue的组件版本太低导致的，就是这俩货：

"vue-loader": "^11.3.4",
"vue-style-loader": "^2.0.5",
1
2

vue-loader 需要 11.2.0以后版本才支持

vue-style-loader需要 2.2.0以后版本才支持

大家应该知道vue-loader和vue-style-loader必须匹配吧

vue-loader使用了12.0.0，同时vue-style-loader3.0.0

使用实例:

vue2.x使用深度选择器

  .el-tabs {
    flex: auto;
    /deep/ .el-tabs__content {
      flex: auto;
      display: flex;
      flex-direction: column;
      .el-tab-pane {
        flex: auto;
      }
    }
  }

.customStyle {
  .mint-field-other {
    &::v-deep span[class^="buts"]{
    background-color: red !important;
    }
  }
}

.van-checkbox[aria-checked="false"] {
    &::v-deep .van-checkbox__label{
   color: #AAAAAA;
  }
}

&::v-deep .third-dialog .el-dialog__body{
    display: none;
}
&::v-deep .el-dialog {
    border-radius: 8px;
}
&::v-deep .el-button+.el-button {
    margin-left: 0;
}




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

“vue”: “^3.0.0” 版本使用深度选择器

:deep(.fildidcode .van-cell:after) {
  border-bottom: 0 !important;
}

.issueReply-content {
  font-size: 16px;
  color: #AAAAAA;
  line-height: 24px;
  height: 80vh;
  &::v-deep(p:nth-of-type(2)){
    height: 0px;
  }
    
  &::v-deep(p) {
    font-size: 16px;
    color: #AAAAAA;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

上面在element-ui中使用深度选择器时，大都是使用到了&，根据上面的&的分析，使用&是多余的。
我的理解： 使用了& 会让sass、scss这类嵌套提高一个层级。。

下面才是&的正确使用姿势

    .el-menu {
      overflow-y: auto;
      overflow-x: hidden;
      border-right: 0;

      &::-webkit-scrollbar {
        background-color: #32323a;
      }

      &::-webkit-scrollbar-track {
        background-color: #32323a;
      }
		//这里 & > 拿到了 子元素， 然后再给拿到的子元素进行深度选择器。这样就避免选中了所有后代为.el-menu-item的元素，相当于只给子元素做选择器穿透。
      & > :deep(.el-menu-item) {
        background-color: #32323a !important;
        height: $navHeight;
        line-height: $navHeight;
        font-size: 14px;

        &:hover {
          background-color: var(--el-color-primary) !important;
        }

        & > div {
          display: flex !important;
          align-items: center;
          justify-content: center;
          padding: 0 !important;
        }
		//这里展平后即使.el-menu.is-active,也就是级联选择器
        &.is-active {
          background-color: var(--el-color-primary) !important;
        }
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

      .el-sub-menu {
        &:hover {
          background-color: var(--el-color-primary) !important;
        }

        & > :deep(.el-sub-menu__title) {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 !important;
          // color: #fff !important;
          color: #fff !important;

          span {
            display: none;
          }

          &:hover {
            & > :deep(.el-sub-menu__title) {
              background-color: var(--el-color-primary) !important;
            }

            i {
              color: #fff !important;
            }

            background-color: var(--el-color-primary) !important;
          }
        }

        &.is-active {
          & > :deep(.el-sub-menu__title) {
            background-color: var(--el-color-primary) !important;
          }

          i {
            color: #fff !important;
          }
        }
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

后代选择

子选择器

相邻兄弟

随后兄弟

元素选择器

（标签选择器和*选择器），

属性选择器

• 类
• id
• 以及其他属性如…
• 属性值直接选择器
  • [attr]
  • [attr~=“val”]
  • [attr=“val”]
  • [attr|=“val”]
• 属性值正则选择器
  • [attr^=“val”]
  • [attr$=“val”]
  • [attr*=“val”]

用户行为伪类

• 手型进过伪类 :hover
• 激活状态伪类 :active
• 焦点伪类 :focus
• 整体焦点伪类 :focus-within
• 键盘焦点伪类 :focus-visiable

URL定位伪类

• 链接历史伪类 :link 和 :visited
• 目标链接伪类 :target

输入伪类

• 输入控件状态
  • 可用状态与禁用状态 :enable和 :disable
  • 占位符显示伪类 :placeholder-shown
  • 默认选项伪类 :default
• 输入值伪类
  • 选中选项伪类 :checked
  • 不确定值伪类 :indeterminate
• 输入值验证
  • 有效性验证伪类 :valid和 :invalid
  • 范围验证伪类 :in-range 和 :out-of-range
  • 可选性伪类 :required 和 : optional
  • 用户交互伪类 :user-invalid 和空值伪类 :blank

树结构伪类

• :root伪类

• :empty 伪类

• 子索引伪类

  • :first-child 和 :last-child
  • only-child
  • :nth-child() 和 :nth-last-child()

• 匹配类型的子索引伪类

  • :first-of-type 和 :last-of-type
  • :only-of-type
  • :nth-of-type() 和 :nth-of-last-type()

逻辑组合伪类

• 否定伪类 :not()
• 任意匹配伪类
  • :is()
  • :is() 和 :matches 的区别
• 了解任意匹配伪类 :where
• 了解关联伪类 :has

其他伪类

• 与作用域相关的伪类
  • 参考元素伪类 :scope