特定选项卡的CSS背景颜色

Question

HTML

<div class="woocommerce-tabs wc-tabs-wrapper">
   <ul class="tabs wc-tabs">
       <li class="paym-plans_tab">
          <a href="#tab-paym-plans">Contract Deals</a>
       </li>
          <li class="simfree-plans_tab active">

CSS

#tabs ul.wooTabs li a.selected, #tabs ul.tabs li.active a, .woocommerce_tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li.active a {
    background: #52b9e9 none repeat scroll 0 0;
    color: white;
}

尝试将特定的woocommerce选项卡.paym-plans_tab active和.simfree-plans_tab active的背景颜色改为#52b9e9，文本颜色改为白色，同时该选项卡被选中，上面的CSS更改所有选项卡，我如何才能只针对我想要的选项卡。

Answer 1

如果我没理解错的话，你只需要像这样：

.wc-tabs .active a {
    background: #52b9e9 none repeat scroll 0 0;
    color: white;
}

当然，当您单击某个选项卡并将其从先前活动的选项卡中删除时，框架应该将active类分配给该选项卡

Answer 2

请参阅this

.paym-plans_tab {
  background-color: #52b9e9;
  color: white;
  }

.paym-plans_tab > a {
  color: white;
 }

.simfree-plans_tab > a {
   color: white;
  }


a:hover {
 background-color: red;
}

.simfree-plans_tab {
  background-color: #52b9e9;
  color: white;
 }