html - <ul> 使用 :nth-child to set different color 的问题

Question

我有这个<ul>并试图为第一个、第二个、第三个和第四个设置不同的颜色 <li>标题文字。此时只有拳头元素的颜色正在应用。我怎样才能解决这个问题？这是我的代码:

.ui-tabs-nav li a:nth-child(1n) {
  color: #EE843D !important;
}

.ui-tabs-nav li a:nth-child(2n) {
  color: #1FAC61 !important;
}

.ui-tabs-nav li a:nth-child(3n) {
  color: #ED707A !important;
}

.ui-tabs-nav li a:nth-child(4n) {
  color: #F9FFE8 !important;
}

<ul class="ui-tabs-nav" role="tablist">
  <li><a href="#tab-1-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><i class="luxe-icon " style="font-size:60pxpx; color:;"></i>Title 1</a></li>
  <li><a href="#tab-1-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><i class="luxe-icon " style="font-size:60pxpx; color:;"></i>Title 2</a></li>
  <li><a href="#tab-1-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><i class="luxe-icon " style="font-size:60pxpx; color:;"></i>Title 3</a></li>
  <li><a href="#tab-1-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><i class="luxe-icon " style="font-size:60pxpx; color:;"></i>Title 4</a>
  <li><a href="#tab-1-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><i class="luxe-icon " style="font-size:60pxpx; color:;"></i>Title 5</a></li>
</ul>

jsfiddle

Answer 1

你必须将 nth-child 放在 li 标签上，而不是 a
updated fiddle

.ui-tabs-nav li:nth-child(1) a {
    color: #EE843D !important;
}

.ui-tabs-nav li:nth-child(2) a {
    color: #1FAC61 !important;
}

.ui-tabs-nav li:nth-child(3) a {
    color: #ED707A !important;
}

.ui-tabs-nav li:nth-child(4) a {
    color: #F9FFE8 !important;
}

<ul class="ui-tabs-nav" role="tablist">
    <li><a href="#tab-1-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><i class="luxe-icon " style="font-size:60pxpx; color:;"></i>Title 1</a></li>
    <li><a href="#tab-1-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><i class="luxe-icon " style="font-size:60pxpx; color:;"></i>Title 2</a></li>
    <li><a href="#tab-1-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><i class="luxe-icon " style="font-size:60pxpx; color:;"></i>Title 3</a></li>
    <li><a href="#tab-1-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><i class="luxe-icon " style="font-size:60pxpx; color:;"></i>Title 4</a>
    <li><a href="#tab-1-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><i class="luxe-icon " style="font-size:60pxpx; color:;"></i>Title 5</a></li>
</ul>