CSS继承对于选项卡不能正常工作

<div class="tab">
  <button class="tab-btn active">Tab 1</button>
  <button class="tab-btn">Tab 2</button>
  <button class="tab-btn">Tab 3</button>
</div>
<div class="tab-content">
  <div class="tab-item active">Content 1</div>
  <div class="tab-item">Content 2</div>
  <div class="tab-item">Content 3</div>
</div>

.tab-btn {
  /* 按钮样式 */
}

.tab-content {
  /* 内容区域样式 */
}

.tab-item {
  display: none; /* 隐藏所有内容区域 */
}

.tab-item.active {
  display: block; /* 显示当前选中的内容区域 */
}

$('.tab-btn').click(function() {
  var index = $(this).index(); // 获取按钮的索引
  $('.tab-btn').removeClass('active'); // 移除所有按钮的 active 类名
  $(this).addClass('active'); // 给当前点击的按钮添加 active 类名
  $('.tab-item').removeClass('active'); // 移除所有内容区域的 active 类名
  $('.tab-item').eq(index).addClass('active'); // 给对应的内容区域添加 active 类名
});