scss中深度选择器如何使用

scss 中深度选择器如何使用

在开发过程中，可能会遇到 scss 中样式不会执行，这时候我们就会用到深度选择器 /deep/
通常情况下，写样式穿透都是用 >>>，或者 /deep/

1. 第一种方式：>>>

代码如下（示例）：

>>> class-name {}

2. 第二种方式：/deep/

代码如下（示例）：

.upload_form .del_star /deep/ .el-form-item__label:before {
  content: "" !important;
  display: none;
}

以上两种方式正常情况下使用都没有问题，但在 scss，less，sass 等解析器中，>>>，/deep/ 可能都无法使用，这种情况可以采用 ::v-deep。

3. 第三种方式：::v-deep

代码如下（示例）：

::v-deep .li{
    
}

开发过程中遇见的问题：

在 /deep/ 使用以上写法编译时，出现报错或者警告可以使用 ::v-deep。

:deep() 的用法:

代码如下（示例）：

  .upload_form .del_star {
    :deep(.el-form-item__label:before) {
      content: '' !important;
      display: none;
    }
  }