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

问题描述：

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

可能重复http://stackoverflow.com/questions/17458582/css-selectors-nth-childeven-odd-with-class/和http://stackoverflow.com/questions/10921809/css3-nth-of-类型限制到类 –

我想你想要一个类选择器 - 但这不存在..请参阅http://stackoverflow.com/questions/13975475/css-global-nth-of-type -selector-n-class（可能重复） – Danield

答

如何在其他问题的意见规定，你不能限制那些伪类的用法：所以无需使用nth-*伪类和不改变你的标记，你可以给这种风格

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

例如jsbin

答

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

答

具有不同和编码之实践（我）： 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/

答

使用此CSS：

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

Demo here

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

相关推荐