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;
    }
  }