1.想实现的效果,选中的tab栏文字加粗在这里插入图片描述

在这里插入图片描述

2. 选中文字,看vant是怎么命名样式的

选中的盒子有一个类名是:van-tab–active
在这里插入图片描述

3. 尝试用.van-tab–active来选中盒子改变样式

可以看到,设置上了900的字体大小,并没有设置上

在这里插入图片描述
在这里插入图片描述

4. 用穿透属性 ::v-deep 来设置

::v-deep .van-tab--active {
  font-weight: 900;
}

可以看到成功设置上了样式

在这里插入图片描述

5. 补充:也可以用属性选择器来选中元素进行样式的改变

::v-deep .van-tab[aria-selected="true"] {
  font-weight: 900;
}

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐