vue3如何阻止所有css的继承

在Vue 3中，可以使用<style>标签的scoped属性来阻止CSS的继承。将scoped属性添加到<style>标签上，可以使该组件中的CSS样式只在当前组件中生效，不会影响其他组件。

示例代码如下：

<template>
  <div class="container">
    <h1>Scoped CSS</h1>
    <p>This is a paragraph with scoped CSS.</p>
  </div>
</template>

<style scoped>
.container {
  background-color: red;
}

h1 {
  color: blue;
}

p {
  font-size: 20px;
}
</style>

在上面的示例中，.container类的样式只会应用于当前组件中的<div>元素，而不会影响其他组件。同样，h1和p元素的样式也只会在当前组件中生效。

这种方式可以很好地隔离组件之间的样式，并且不会相互影响。