在Vue中使用deep深度选择器修改element UI组件的样式

在 Vue 中使用深度选择器（deep selector）可以修改 Element UI 组件的样式。使用深度选择器可以突破组件样式的私有作用域，使得选择器能够深入组件内部，从而修改组件内部的样式。

以下是使用深度选择器的完整攻略：

Step 1：使用 /deep/ 或者 >>> 操作符

在 Vue 的模板中，使用 /deep/ 或者 >>> 操作符可以启用深度选择器。

• /deep/ 操作符

在样式表中使用 /deep/ 操作符可以选择组件内部的元素。例如：

// 在组件内部修改 el-pagination 的样式
<template>
  <div class="my-component">
    <el-pagination class="my-pagination" />
  </div>
</template>

<style scoped>
.my-component /deep/ .my-pagination {
  background-color: #409EFF;
}
</style>

• >>> 操作符

操作符也可以用于选择组件内部的元素，其语法更加简洁。例如：

// 在组件内部修改 el-pagination 的样式
<template>
  <div class="my-component">
    <el-pagination class="my-pagination" />
  </div>
</template>

<style scoped>
.my-component >>> .my-pagination {
  background-color: #409EFF;
}
</style>

Step 2：确定目标元素的 CSS 类名

为了使用深度选择器修改 Element UI 组件的样式，需要先确定目标元素的 CSS 类名。例如，在修改 el-pagination 组件的样式时，应该先查看该组件在 DOM 结构中的 CSS 类名。

Step 3：使用深度选择器修改样式

通过查看 Element UI 官方文档或者通过浏览器的开发者工具查看 DOM 结构，可以确定 Element UI 组件的 CSS 类名。例如，在修改 el-pagination 组件的样式时，该组件的 CSS 类名为 .el-pagination。

// 修改 el-pagination 的样式
<template>
  <div class="my-component">
    <el-pagination class="my-pagination" />
  </div>
</template>

<style scoped>
.my-component >>> .el-pagination {
  background-color: #409EFF;
}
.my-component >>> .el-pagination .number.active {
  background-color: #409EFF !important;
}
</style>

以上代码演示了如何使用深度选择器修改 el-pagination 组件的样式。其中，第一个选择器将 el-pagination 的背景颜色修改为 #409EFF，第二个选择器将 el-pagination 中活动的页码的背景颜色修改为 #409EFF。注意，在第二个选择器中，为了覆盖原始样式，必须使用 !important 关键字。

示例 1：

// 修改 el-button 的样式
<template>
  <div class="my-component">
    <el-button class="my-button">按钮</el-button>
  </div>
</template>

<style scoped>
.my-component >>> .el-button {
  background-color: #409EFF;
  color: #fff;
}
</style>

以上代码演示了如何使用深度选择器修改 el-button 组件的样式。其中，将 el-button 的背景颜色修改为 #409EFF，将文字颜色修改为 #fff。

示例 2：

// 修改 el-tabs 的样式
<template>
  <div class="my-component">
    <el-tabs class="my-tabs">
      <el-tab-pane label="标签一">内容一</el-tab-pane>
      <el-tab-pane label="标签二">内容二</el-tab-pane>
      <el-tab-pane label="标签三">内容三</el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.my-component >>> .el-tabs__header {
  background-color: #409EFF;
  color: #fff;
}
.my-component >>> .el-tabs__item.is-active {
  color: #fff;
}
</style>

以上代码演示了如何使用深度选择器修改 el-tabs 组件的样式。其中，将 el-tabs 的标题栏背景颜色修改为 #409EFF，将标题栏文字颜色修改为 #fff，将活动标签的文字颜色修改为 #fff。