使用nth-child将CSS样式应用于特定标记,甚至在它们之间存在其他标记

Question

关于nth-child选择器的CSS3专家我有简单的问题(这里我是n00b)

我有以下简单的HTML代码:

<div>1</div>
<div>2</div>
<div>3</div>
<span>span3</span>
<div>4</div>
<div>5</div>

一种css风格:

div:nth-child(2n+1) {
    color: red;
}

div, span {
    float: left;
}

我为你创造了一个小提琴:http://jsfiddle.net/Q8aPe/

结果是:

123span345 其中1,3,4和5的颜色为红色.

我期待的是:1,3,5变红.

为什么？nth-child不关心标签孩子？或者它只是指一个元素(与标签有什么关系)？

谢谢

Answer 1

你是对的,nth-child根据元素在所有兄弟姐妹中的位置来决定.你想要的是nth-of-type它在所有潜在的css比赛中的元素位置.

div:nth-of-type(2n+1) {
    color: red;
}