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

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

点击这里

我想要红色的 Hi-2、Hi-5 和紫色的 Hi-3、Hi-6。

Answer 1

使用这个 CSS：

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

演示在这里

Answer 2

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

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

示例jsbin

Answer 3

演示

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 4

使用不同且实用的代码（对我而言）：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/