Vue version

3

Link to minimal reproduction

https://codesandbox.io/p/sandbox/elastic-sound-ogh86y?file=%2Fsrc%2FApp.vue

Steps to reproduce

<template>
  <div class="container">
    <h1 class="h1">Hello {{ msg }}</h1>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const msg = ref<string>("World");
</script>

<style scoped lang="less">
.container {
  background: red;

  & > :global(.h1) {
    color: white;
  }
}
</style>

What is expected?

.container[data-v-7a7a37b1] {
    background: red;
}
  
.container[data-v-7a7a37b1]  .h1{
    color: white;
}

What is actually happening?

.container[data-v-7a7a37b1] {
    background: red;
}
  
 .h1 {
    color: white;
}

System Info

No response

Any additional comments?

No response

global 选择器在 vue 编译时会将其提升到全局，这是符合预期的，即使你在预处理器中在嵌套语法做了限制，但在编译时它还是会被提升

global 选择器在 vue 编译时会将其提升到全局，这是符合预期的，即使你在预处理器中在嵌套语法做了限制，但在编译时它还是会被提升

找到了 可以通过 :deep() 实现我的预期，这里我跟less的global属性搞混了