div添加样式 vue_vue 组件中添加样式不生效的解决方法

在 Vue 组件中添加样式，可以使用 `style` 标签或者 `scoped` 属性来实现。

如果你使用的是 `style` 标签，但是样式没有生效，可能是因为样式被其他样式覆盖了。你可以尝试使用更具体的选择器或者使用 `!important` 来覆盖其他样式。

如果你使用的是 `scoped` 属性，但是样式也没有生效，可能是因为你的样式选择器中包含了子组件的选择器。在 `scoped` 属性中，Vue 会为每个组件生成一个唯一的 class 名称，以防止样式冲突。如果你的样式选择器中包含了子组件的选择器，那么子组件的 class 名称会被加入到样式选择器中，导致选择器无法匹配到正确的元素。解决方法是使用 `>>>` 或者 `/deep/` 符号来穿透子组件选择器。

例如，你有一个名为 `MyComponent` 的组件，你想要为它的子组件 `Button` 添加样式，你可以这样写：

<template>
  <div class="my-component">
    <Button>Click me</Button>
  </div>
</template>

<style scoped>
/* 不生效的样式 */
.my-component Button {
  color: red;
}

/* 生效的样式 */
.my-component >>> Button {
  color: red;
}
</style>

或者：

<template>
  <div class="my-component">
    <Button>Click me</Button>
  </div>
</template>

<style scoped>
/* 不生效的样式 */
.my-component /deep/ Button {
  color: red;
}

/* 生效的样式 */
.my-component >>> Button {
  color: red;
}
</style>