vue2 css穿透

在Vue 2中，CSS穿透是指在子组件中通过样式选择器修改父组件的样式。由于Vue 2使用的是基于组件的样式隔离方案，普通的CSS选择器无法直接作用于父组件。不过，你可以通过一些技巧来实现CSS穿透。

一种常见的方法是使用 `deep` 或 `>>>` 选择器。在子组件的样式中，你可以通过这些选择器来定位父组件的元素，并覆盖其样式。例如：

<template>
  <div class="parent">
    <h1 class="title">父组件标题</h1>
    <ChildComponent></ChildComponent>
  </div>
</template>

<style scoped>
.parent /deep/ .title {
  color: red;
}
</style>

在上面的示例中，使用 `/deep/` 选择器来穿透父组件的样式隔离，并将标题的颜色设置为红色。

需要注意的是，`/deep/` 和 `>>>` 选择器在一些CSS预处理器（如Sass和Less）中可能不被支持。另外，由于这种选择器会增加样式的复杂性和耦合度，建议只在必要时使用。

另一种方法是通过给父组件添加自定义类名或属性，然后在子组件中通过这些类名或属性来选择并修改样式。例如：

<template>
  <div :class="{ 'parent-class': true }">
    <h1 class="title">父组件标题</h1>
    <ChildComponent></ChildComponent>
  </div>
</template>

<style scoped>
.parent-class .title {
  color: red;
}
</style>

在上面的示例中，通过给父组件添加了 `parent-class` 类名，并在子组件样式中选择这个类名来修改标题的颜色。

希望这些方法能帮助到你实现Vue 2中的CSS穿透。如果有任何疑问，请随时向我提问。