Bootstrap4 Vue手风琴背景色不生效 如何设置背景与字体大小

三个问题直接导致你的背景规则没效果：

1. CSS写法自相矛盾：先给.card-header写了带!important的半透明白色background-color，下一行的background: transparent;是背景简写属性，会覆盖所有背景相关配置。
2. DOM层级遮挡：b-card-header内部的b-button加了block属性，宽度100%占满整个头部区域，而variant="secondary"自带Bootstrap默认的灰色背景和边框，直接把header本身的背景完全挡住，你给header设的颜色根本露不出来。
3. 如果你用了Vue单文件组件的scoped样式，默认规则无法穿透到第三方组件渲染的内部DOM节点，选择器会匹配不到元素。

背景样式修复 #

两种写法选其一即可：

• 方案1（推荐）：直接给占满头部的按钮设置你要的背景色，逻辑更直接，不需要处理层级问题：

/* 非scoped全局样式可去掉::v-deep */
.faq_accordion ::v-deep .card-header .btn {
  background-color: #f1f1f180 !important;
  border-color: #f1f1f180 !important;
}

• 方案2：保留给card-header设置背景，把按钮默认的背景、边框清空，让header背景透出来：

.faq_accordion ::v-deep .card-header {
  background-color: #f1f1f180 !important;
}
.faq_accordion ::v-deep .card-header .btn-secondary {
  background: transparent;
  border: none;
}

注意：Vue3项目深度选择器用:deep()，Vue2老项目用::v-deep或/deep/都可以，全局非scoped样式不需要加深度选择器。

字体大小设置 #

按需求分层设置即可：

• 整个手风琴统一字号：直接给外层.faq_accordion容器设置font-size，内部文本会默认继承这个值
• 单独调整头部按钮字号：给.card-header .btn选择器加font-size规则
• 单独调整内容区字号：给.card-body选择器加font-size规则

完整可参考的CSS配置：

.faq_accordion {
  /* 全局基础字号 */
  font-size: 16px;
}
.faq_accordion ::v-deep .card-header {
  padding: 0;
  background-color: #f1f1f180 !important;
}
.faq_accordion ::v-deep .card-header .btn {
  /* 头部按钮字号 */
  font-size: 17px;
  background: transparent;
  border: none;
  text-align: left;
  padding: 0.75rem 1rem;
}
.faq_accordion ::v-deep .card-body {
  /* 内容区字号 */
  font-size: 15px;
  line-height: 1.6;
}

内容的提问来源于stack exchange，提问作者Junior Developer