css 如何用途：：v-deep选择器来选择vue中的嵌套类

f45qwnt8 于 2023-02-17 发布在其他

关注(0)|答案(2)|浏览(204)

我知道::v-deep选择器在vue 3中被修改了。我知道如何在一个类中使用它，但是我找不到任何关于嵌套类名的源代码。例如：
版本2

::v-deep {
    .table-footer-container {
      display: none ;
    }
  }

第3版

:deep(.table-footer-container) {
    display: none 
  }

但是我怎样才能把这个代码块转换成vue 3版本呢？

::v-deep {
      .v-select {
        .vs__dropdown-toggle {
          background: #fff;
          border-color: #ddd;
        }
        &.vs--open {
          .vs__dropdown-toggle {
            border-color: #ff6000;
          }
        }
      }
    }

css

来源：https://stackoverflow.com/questions/72735353/how-to-use-v-deep-selector-for-nested-classes-in-vue

2条答案

按热度按时间

5t7ly7z51#

在:deep()中 Package 两个嵌套的选择器：

<style scoped lang="scss">
.v-select {
  color: green;
     👇
  &:deep(.vs__dropdown-toggle) {
    background: #fff;
    border-color: #ddd;
    color: red;
  }
     👇
  &:deep(.vs--open) {
    .vs__dropdown-toggle {
      border-color: #ff6000;
      color: blue;
    }
  }
}
</style>

demo

赞(0）回复(0）举报 2023-02-17

n53p2ov02#

如果希望代码更改简单，还可以通过星号操作符允许更改所有子元素，从而很容易地取消使用子选择器的义务：

:deep(*) {
  .v-select {
    .vs__dropdown-toggle {
      background: #fff;
      border-color: #ddd;
    }
    &.vs--open {
      .vs__dropdown-toggle {
        border-color: #ff6000;
      }
    }
  }
}

这种解决方案在很多情况下更有意义，因为这样不会丢失（BEM）符号的旧结构。

.paragraph {
  &__headline {
    margin-bottom: 2rem;
  }
  &__text {
    margin-bottom: 20px;
  }
  ::v-deep &__link {
    text-decoration-color: red;
  }
}

......可以转换成这个......

.paragraph {
  &__headline {
    margin-bottom: 2rem;
  }
  &__text {
    margin-bottom: 20px;
  }
  :deep(*) &__link{
    text-decoration-color: red;
  }
}

......而不改变任何结构。

赞(0）回复(0）举报 2023-02-17

我来回答

css 如何用途：：v-deep选择器来选择vue中的嵌套类

2条答案

相关问题

热门标签

最新问答