<ul>使用问题：nth-​​child设置不同的颜色

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

而不是a，您必须将nth-child放在li标记上 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>

Answer 2

你应该在li中应用第n个类，因为它不适用于标记。

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

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

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

.ui-tabs-nav li:nth-child(4n) 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>

Answer 3

尝试对nth-child使用奇数偶数。

＆＃13;

＆＃13;

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

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

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;