Vue version

3.4.19

Link to minimal reproduction

https://play.vuejs.org/#eNqdUsFKAzEQ/ZUQhIKUXaperKug0oMeVNRjQNbdaU3NJiHJrpXSf3cm6a6K1YO3zHtvhjfzsubn1mZdC3zKC185aQPzEFp7JrRsrHGBXZrG7k3Y3JmGjbKcSmoYnQgtdJGnJpRjEaCxqgyAFWNFLTtWqdL7U8Er7BI84shsR+ZJl6MQX0U+tPMxD74yei4X2dIbjebWJE1zpAJ3a4M02gs+ZZEhrlTKvF1HLLgWxj1evUD1ugNf+hVhgt858OA6EHzgQukWEBI9e7iBFb4HsjF1q1D9B3kP3qiWPCbZRatrtP1FF91exRNLvXj0s1UA7fulyCgpN1EvOB6cjvbb6p92D7Oj2Cf0Bq/Yh/Uj3X/lJlE32UZImVF90Me3M8g43Yd3BQzztFAjktHMZL0yyrgpc1DjZ0LLPbn/jX5WLSQeXdMs+h9PHTi6Fm6GK2eTY775AIhg7Bc=

Steps to reproduce

1. create a new component which root node has a class name and a child
2. create a css rule for that class, and create a .class > * rule for its descendants
3. use that component in a component, with an ancestor who has the same class name with that component's root node
4. the style of the node is effected by the rules which mean to take effects on its descendants because the existence of a class name out of the scope

What is expected?

.class-name[data-v-hash] {
 ...
}

.class-name[data-v-hash] * {
...
}

What is actually happening?

.class-name[data-v-hash] {
 ...
}

.class-name *[data-v-hash] {
...
}

System Info

No response

Any additional comments?

No response