关于nth-child的疑惑

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

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

1

2

3

4

5

     < h1 > 这 是 标 题 </ h1 >

     < p > 第 一 个 段 落 。 </ p >

     < p > 第 二 个 段 落 。 </ p >

     < p > 第 三 个 段 落 。 </ p >

     < p > 第 四 个 段 落 。 </ p >

1

2

3

4

5

6

7

/* @reset */

body { background-color: #FFFFFF; }

/* ==== demo ==== */

p :nth-child( -n+ 3) {

     background: #ff0000;

}

1

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

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

: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>加个父元素试试：

1

2

3

4

5

6

7

     < h1 > 这 是 标 题 </ h1 >

     < div >

         < p > 第 一 个 段 落 。 </ p >

         < p > 第 二 个 段 落 。 </ p >

         < p > 第 三 个 段 落 。 </ p >

         < p > 第 四 个 段 落 。 </ p >

     </ div >

1

2

3

4

5

6

7

/* @reset */

body { background-color: #FFFFFF; }

/* ==== demo ==== */

p :nth-child( -n+ 3) {

     background: #ff0000;

}

1

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

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

1

2

3

4

5

6

7

8

9

10

11

     < h1 > 这 是 标 题 </ h1 >

     < div >

         < p > 第 一 个 段 落 。 </ p >

         < p > 第 二 个 段 落 。 </ p >

         < p > 第 三 个 段 落 。 </ p >

         < p > 第 四 个 段 落 。 </ p >

     </ div >

     < p > 第 一 个 段 落 。 </ p >

     < p > 第 二 个 段 落 。 </ p >

     < p > 第 三 个 段 落 。 </ p >

     < p > 第 四 个 段 落 。 </ p >

1

2

3

4

5

6

7

/* @reset */

body { background-color: #FFFFFF; }

/* ==== demo ==== */

p :nth-child( -n+ 3) {

     background: #ff0000;

}

1

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

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

1

2

3

4

5

6

7

8

9

10

11

     < h1 > 这 是 标 题 </ h1 >

     < div >

         < p > 第 一 个 段 落 。 </ p >

         < p > 第 二 个 段 落 。 </ p >

         < p > 第 三 个 段 落 。 </ p >

         < p > 第 四 个 段 落 。 </ p >

     </ div >

     < p > 第 一 个 段 落 。 </ p >

     < p > 第 二 个 段 落 。 </ p >

     < p > 第 三 个 段 落 。 </ p >

     < p > 第 四 个 段 落 。 </ p >

1

2

3

4

5

6

7

8

9

10

/* @reset */

body  {

     background-color:  #FFFFFF;

}

/* ==== demo ==== */

p :nth-of-type( -n+ 3)  {

     background:  #ff0000;

}

1

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