Html 更改使用wordpress插件填充的内容选项卡的颜色？

我正在使用一个名为Responsive Tabs（WP Darko）的Wordpress插件为我正在工作的教育网站的选项卡填充不同的内容。我正在尝试更改5个选项卡中每个选项卡的颜色，使其与我在插件设置中选择的默认颜色选项不同。插件支持团队告诉我，使用CSS可以做到这一点，但我想不出来，我不能付钱让他们这么做，因为我们是一个公共资助的学区，我不可能得到预算批准，让某人在网站上更改某些东西的颜色

这是试验场地：

我只在网站上添加了插件。我想更改选项卡的颜色，以及选中时选项卡下内容区域的上边框（您现在可以看到它们都是相同的颜色）

我尝试了大量的tab类的变体“.1189-tab-link-0”，“.1189-tab-link-1”等等，但我一无所获

如果您能帮助确定哪些课程能完成任务，我们将不胜感激！然后使用！重要的标签应该完成工作。对吧?

---

谢谢大家!

伙计，当选项卡处于活动状态时，您可能想更改颜色：D 试试这个

或文本颜色更改

classname:active { color: red; }

---

同样的改变边界的方法

页面上的HTML使用内联样式，例如：

<li class="mobile_toggle">&zwnj;</li><li class="current"><a style="background:#f19803" class="active 1189-tab-link-0" href="#" data-tab="#1189-tab-0">Self-Awareness</a></li>

&zwnj

要更改颜色，请更改十六进制值#f19803。因为这会选择整个链接列表，所以会更改所有链接的颜色。内联样式不是最佳做法，但要更改每个链接，可以通过向每个li标记添加style=“background:#（hex color）”来更改每个li标记的背景色。例如：

<a style="background:#ff55ff" href="#" data-tab="#1189-tab-2" class="1189-tab-link-2">Social Awareness</a></li>

我理解这一点，谢谢。我也尝试了一下，但它不起作用，因为我使用了一个插件，该插件使用PHP和CSS来实现查看源代码时看到的HTML。在CSS中，您知道我如何改变这一点吗：在CSS部分（样式标记之间），您需要通过引用它们的类来选择每个标记。在这里，可以使用.1189-tab-link-1{background:#ff00ff；etc.}完成此操作。我认为，您无法单独使用类来选择这些标记的原因是CSS中的其他选择器具有更高的优先级，因为它们更具体。要使选择器更具体，需要在课堂上选择li和a。谢谢。我试过这个（下面）但没有用。想法？.1189-tab-link-1ulli{背景色：#ff55ff！重要；}.1189-tab-link-1ulli{背景色：#ff55ff！重要；}.1189-tab-link-1li{背景色：#ff55ff！重要；}.1189-tab-link-1a{背景色：#ff55ff！重要；}我又看了一眼，在JS fiddle上，我可以通过对每个tbody周围的div元素进行内联颜色更改来更改每个选项卡的高亮颜色。第一个选项卡的div的id是1189-tab-0，然后是1189-tab-1，等等。也许可以尝试使用CSS选择#1189-tab-0，或者进行内联更改，看看这是否适用于您的插件。我开始怀疑是否必须在javascript中更改它？我不愿意这样做，虽然支持团队告诉我，这可以在CSS中完成。JS below.var rtbs_def_colors={backgroundColor:'transparent'，}$j（'.rtbs'）.each（function（）{var color=$j（this）.find（'.rtbs_color'）.html（）；var breakpoint=$j（this）.find（'.rtbs_breakpoint'）.html（）；var rtbssize=$j（this）.width（）；if（rtbssize>breakpoint）{$j（this）.removeClass（'rtbs_full'）；$j（this）.find（“.mobile_toggle”）.hide（）；$j（你能在html文件中添加你的类吗？在文件中找到链接，例如

，然后在css文件中找到这两个链接

<a style="background:#ff55ff" href="#" data-tab="#1189-tab-2" class="1189-tab-link-2">Social Awareness</a></li>