在IE中DIV颜色无法正常显示

Question

我正在使用自定义主题在ORACLE APEX中开发应用程序。

应用程序在IE以外的所有浏览器中都运行得很好，IE没有像我期望的那样正确显示颜色。

此结果来自我的Chrome浏览器。

现在在Internet Explorer 8（IE8）中所有这些搞砸了，颜色效果无法正常显示。

以下是CSS

的1,2,3,4 <div>

.top-tabs .tab:nth-child(1),.head1 .region-header {
   background-color: #014fa2;
}

.top-tabs .tab:nth-child(2),.head2 .region-header {
   background-color: #1e69b9;
}

.top-tabs .tab:nth-child(3),.head3 .region-header {
   background-color: #3481d2;
}

.top-tabs .tab:nth-child(4),.head4 .region-header {
   background-color: #58a1f0;
}

这是我的HTML

<ul class="top-tabs">
    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">1</div>
        <div class="top-tab-label">Admission<br>Application</div>
      </a>
    </li>

    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">2</div>
        <div class="top-tab-label">Pay<br>Application Fee</div>
      </a>
    </li>

    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">3</div>
        <div class="top-tab-label">Submit<br>Required Documents</div>
      </a>
    </li>

    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">4</div>
        <div class="top-tab-label">Sign up<br>Information</div>
      </a>
    </li>
</ul>

要克服的任何帮助/指南??

Answer 1

无需JavaScript ......

选项A
为每个列表项提供一个类，与标题相同。

选项B
使用+（adjacent sibling）选择器。像这样：

.top-tabs .tab:first-child,.head1 .region-header {
   background-color: #014fa2;
}

.top-tabs .tab:first-child + .tab,.head2 .region-header {
   background-color: #1e69b9;
}

.top-tabs .tab:first-child + .tab + .tab,.head3 .region-header {
   background-color: #3481d2;
}

.top-tabs .tab:first-child + .tab + .tab + .tab,.head4 .region-header {
   background-color: #58a1f0;
}

尝试一下：http://jsfiddle.net/3q9cD/