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

Question

我有一个关于 nth-child 选择器的简单问题要问 CSS3 专家(这里我是 extemely 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;
}

我为你创建了一个 fiddle :http://jsfiddle.net/Q8aPe/

结果是:

123span345 其中 1、3、4 和 5 为红色。

我期望的是:1,3,5 为红色。

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

谢谢

Answer 1

你是对的，nth-child 根据元素在其所有兄弟元素中的位置来决定。您想要的是 nth-of-type，它基于元素在其所有潜在 css 匹配项中的位置。

http://jsfiddle.net/Q8aPe/1/

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