1

我对 CSS3 专家有一个关于nth-child选择器的简单问题（这里我是 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不关心标签孩子？或者它只是指一个元素（不管标签有什么）？

谢谢

4

2 回答 2

5

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

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

div:nth-of-type(2n+1) {
    color: red;
}
于 2013-11-08T14:40:20.310 回答
3

尝试使用:nth-of-type()而不是:nth-child()

于 2013-11-08T14:39:26.240 回答