更改el-tabs的文字大小样式等

Wether or not

已于 2022-03-17 14:23:51 修改

阅读量1.9k

点赞数

分类专栏： el-tabs 文章标签： vue.js css3 css

于 2022-03-17 14:23:10 首次发布

本文链接：https://blog.csdn.net/wehter/article/details/123549427

版权

el-tabs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客主要介绍了如何使用/deep/选择器和!important来深入定制Element UI库中的Eltabs组件样式，包括修改导航栏背景色、字体大小、行高以及各标签页的样式，确保样式覆盖并有效应用。

摘要由CSDN通过智能技术生成

.container /deep/ .el-tabs__nav-scroll{
  background-color: aqua;
  line-height: 65px;
    height: 65px;
}
.container /deep/ .el-tabs__nav{
  font-size: 29px;
    line-height: 65px;
    height: 65px;
}
.container /deep/ #tab-first{
  line-height: 70px;
    height: 70px;
}
.container /deep/ #tab-second{
  line-height: 70px;
    height: 70px;
}
// 更改eltabs的样式

.container /deep/.el-tabs__item {
  font-size: 18px !important;
  height: 40px;
}


// .container /deep/.el-tabs__header {
//   font-size: 30px !important;
// }