Question

我使用javascript标签显示基于标签选择的内容。它工作得很好。只有我想要改变的是标签的背景颜色。我需要在四个单独的标签上显示4种不同的背景颜色。内联css无法正常工作，因为它是从javascript文件调用的。我从这里得到了代码：http://www.barelyfitz.com/projects/tabber/

代码：

HTML：

 <div class="tabber">
 <div class="tabbertab" style="background:#dadada">
 <h2 style="font-size:18px;">HR Policies</h2>
 <p>Content Display.</p>
 </div>

CSS：

  ul.tabbernav li a {
  background: #DDE;
  }

以上是所有标签的默认背景颜色。

使用Javascript：

  if (!t.headingText) {
  /* Title was not found (or is blank) so automatically generate a
     number for the tab.
  */
  t.headingText = i + 1;
 }

 /* Create a list element for the tab */
 DOM_li = document.createElement("li");

 /* Save a reference to this list item so we can later change it to
   the "active" class */
 t.li = DOM_li;

 /* Create a link to activate the tab */
 DOM_a = document.createElement("a");
 DOM_a.appendChild(document.createTextNode(t.headingText));
 DOM_a.href = "javascript:void(null);";
 DOM_a.title = t.headingText;
 DOM_a.onclick = this.navClick;

 /* Add some properties to the link so we can identify which tab
   was clicked. Later the navClick method will need this.
 */
 DOM_a.tabber = this;
 DOM_a.tabberIndex = i;

 /* Do we need to add an id to DOM_a? */
  if (this.addLinkId && this.linkIdFormat) {

  /* Determine the id name */
  aId = this.linkIdFormat;
  aId = aId.replace(/<tabberid>/gi, this.id);
  aId = aId.replace(/<tabnumberzero>/gi, i);
  aId = aId.replace(/<tabnumberone>/gi, i+1);
  aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

  DOM_a.id = aId;
 }

 /* Add the link to the list element */
 DOM_li.appendChild(DOM_a);

 /* Add the list element to the list */
 DOM_ul.appendChild(DOM_li);
 }

Answer 1

试试这样：

<强> CSS：

 ul.tabbernav li a {
  background: #DDE !important;
  }

!important这将override正在应用的任何属性

希望这会有所帮助

Answer 2

最好使用具有更高特异性的选择器来覆盖默认颜色而不是!important，

试

.tabberlive ul.tabbernav li a {
 background: #DDE;
}

您可以按如下方式为每个标签着色：fiddle

.tabberlive ul.tabbernav li:nth-child(1) a {
 background: cyan; /* color for 1st tab */
}
.tabberlive ul.tabbernav li:nth-child(2) a {
background: silver; /* color for 2nd tab */
}
.tabberlive ul.tabbernav li:nth-child(3) a {
background: yellow; /* color for 3rd tab */
}
.tabberlive ul.tabbernav li:nth-child(4) a {
background: cyan; /* color for 4th tab */
}

等

更改标签颜色

2 个答案: