Question

HTML：

<ul>
  <li class="a">Hi-1</li>
  <li class="b">Hi-2</li>
  <li class="b">Hi-3</li>
  <li class="a">Hi-4</li>
  <li class="b">Hi-5</li>
  <li class="b">Hi-6</li>
</ul>

CSS：

 li{
   list-style:none;
 }
.a{
   color:blue;
 }
.b:nth-child(odd){
  color:red;
}
.b:nth-child(even){
  color:violet;
}

click here

我希望Hi-2，Hi-5为红色，Hi-3为Hi-6，紫色。

Answer 1

如何在评论中的其他问题中指定，您不能限制这些伪类的使用：因此，如果不使用nth-*伪类而不更改标记，您可以使用此样式

ul li:first-child + .b, .a ~ .a + .b { color: red; }
.b + .b { color: violet; }

示例jsbin

Answer 2

Demo

li{
    list-style:none;
}
.a{
    color:blue;
}
.b:nth-child(2n),.b:nth-child(5n){
    color:red;
}
.b:nth-child(6n), .b:nth-child(3n){
    color:violet;
}

Answer 3

使用不同的实用代码（对我而言）： HTML：

  <ul>
  <li class="c">Hi-1</li>
  <li class="b">Hi-2</li>
  <li class="a">Hi-3</li>
  <li class="c">Hi-4</li>
  <li class="b">Hi-5</li>
  <li class="a">Hi-6</li>
  </ul>

CSS：

li {
list-style : none;
}
.a {
color: violet;
}
.b {
color: red;
}
.c {
color : blue;
}

小提琴：http://jsfiddle.net/WESnh/

Answer 4

使用此CSS：

.b:nth-of-type(3n-1){
  color:red;
}
.b:nth-of-type(3n-3){
  color:violet;
}

<强> Demo here

在CSS中选择特定类的偶数元素

4 个答案: