在无序列表中设置范围样式

时间:2015-07-03 16:29:14

标签: html css

我已经购买了一个带有标签浏览元素的模板(一种展示不同内容的菜单),我想更改列表中文本的颜色。 每个选项卡都需要具有不同的颜色。所以第一个红色,第二个蓝色,第三个绿色和第四个黄色。我尝试了所有关于孩子,元素,类等的事情,但没有结果。

这是我尝试过的代码之一

#one a
{
color:#e28844
}
<ul class='cmsms_tabs_list'>
  <li id="one" class="cmsms_tabs_list_item">
     <a href="#">
       <span>One</span>
      </a>
    </li>
  <li id="two" class="cmsms_tabs_list_item">
     <a href="#">
       <span>Two</span>
      </a>
    </li>
  <li id="three" class="cmsms_tabs_list_item">
     <a href="#">
       <span>Three</span>
      </a>
    </li>
  <li id="four" class="cmsms_tabs_list_item">
     <a href="#">
       <span>Four</span>
      </a>
    </li>
  </ul>

1 个答案:

答案 0 :(得分:3)

您可以添加以下样式

.cmsms_tabs_list li:nth-of-type(1) a span {
     color : red;
}

.cmsms_tabs_list li:nth-of-type(3) a span {
      color : blue;
}

.cmsms_tabs_list li:nth-of-type(4) a span {
      color : green;
}

.cmsms_tabs_list li:nth-of-type(2) a span {
      color : yellow;
}

供参考 - http://jsfiddle.net/s1s12w2x/1/