最近在做一个关于vue的小项目，在做的过程中用到了Vant组件库，需要去改一下导航栏上的一些样式，官网上写的有点复杂。其实用深度选择器就能实现修改。

            <van-nav-bar
                title="标题"
                left-text="返回"
                left-arrow
            ></van-nav-bar>

这个是它自己的样式。

用深度选择器给它修改：

::v-deep .van-nav-bar__title {
    color: red;
}
::v-deep .van-nav-bar__text {
    color: red;
}
::v-deep .van-nav-bar__arrow {
    color: red;
}

二，在开发中还有许多修改样式的方法可以用，介绍一个比较简单的方法

<template>
  <div class="hello">
    <el-page-header @back="goBack" content="标题"> </el-page-header>
  </div>
</template>

        比如上面这段代码，想要修改它的样式，标题，返回，箭头的样式。可以先运行起来，在浏览器中打开开发者工具，用小箭头选择要修改的内容，右边会出现它的class，根据class就可以修改它的样式。

<template>
  <div class="hello">
    <el-page-header @back="goBack" content="标题"> </el-page-header>
  </div>
</template>
<style>
.el-icon-back {
  color: red;
}
.el-page-header__title { 
  color: blue;
  font-size: 20px;
}
.el-page-header__content {
  color: yellow;
  font-size: 30px;
}
</style>

        这样就修改好了。