关于nth-child的疑惑

由 Ghostzhang 发表于

今天在CSS森林群有同学问了个问题：

【活跃】ζ”綉;財ヾ nth-child 怎么选前三个 【活跃】Davin :nth-child(-n+3) 【吐槽】鬼-CSSForest +4

正好很久没写代码了，也想试试回答下这个问题，于是就搜索了下，于是就找到了 W3School的CSS3 :nth-child() 选择器，看到了这样一个代码：


p:nth-child(-n+3){
	background:#ff0000;
}
效果展示

感觉有点奇怪，我原本以为应该会是前三个段落被选中，像这样：

效果展示

一定是哪里不对了。来看看它的说明：

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。

MSN文档对:nth-child的说明：

伪类:nth-clild(an+b)匹配在文档树中前面有an+b-1个兄弟元素的元素，此时n大于或等于0，并且该元素具有父元素。简而言之，该选择器匹配多个位置满足an+b的子元素。

span:nth-child(-n+3) 匹配前三个子元素中的span元素。

注意到一个特点——“具有父元素”，于是我们给这个例子中的<p>加个父元素试试：

效果展示

element:nth-child(an + b) { /*规则*/ }

成功。也就是说nth-child从最大的父元素”body”开始，匹配“an+b”个元素，如果里面包含”element”，则对其应用样式规则。

效果展示

以上，如果你想更可控的应用到“element”元素上，可以试试：


p:nth-of-type(-n+3){
	background:#ff0000;
}
效果展示

最后，在Useful :nth-child Recipes中的例子由于都是使用li，所以很容易就忽略了上面出现的问题，也是提个醒吧。

感谢CSS森林群里热情的同学。

【活跃】Davin 前 3 个不是 -n+3 么？ 怎么来个 +4 除非 有个不一样的 在前3个里面 【吐槽】鬼-CSSForest http://codepen.io/ghostzhang/pen/dobKaq 【活跃】Davin 你把 h1 去了啊 【吐槽】鬼-CSSForest 把它变成子元素就可以了。 【活跃】Davin 嗯 兄弟元素有不一样的不对了 【吐槽】鬼-CSSForest 也就是说(an+b)是直接取元素，而跟伪类前的element无关 嗯嗯 【吐槽】Aoteman-大白 本来就没关系呀 nth-child 不会在乎前面是什么标签 【吐槽】鬼-CSSForest 很容易误解啊，p:nth-child(-n+3) 不会理解成前三个p吗？ 反正我是误解了 【吐槽】Aoteman-大白 那是你用少了 ，用多了就知道 nth-child 压根就不在乎 前面用的是什么，前面的p 选择就是 把p的 所有兄弟元素算成一个集合。 【吐槽】鬼-CSSForest 学到了 【吐槽】鬼-CSSForest 2015/4/20 15:18:59 用li应该不会遇到这个问题，所以也容易被忽略 【冒泡】诺兰德 怪不得没注意，是这个问题 【吐槽】鬼-CSSForest 又一篇blog了~ 【活跃】Davin 理是这么个理 但人家说这些元素要有父元素 【吐槽】鬼-CSSForest body 哈哈 【活跃】Davin 哈哈哈 【吐槽】Aoteman-大白 元素会有父元素的。因为有body和html 15:21:40 【活跃】Davin you win 【吐槽】Aoteman-大白 记得提及我~求在高大上的blog里面露脸

讨论

我有话说