關於nth-child的疑惑

正好很久沒寫代碼了，也想試試回答下這個問題，於是就搜索了下，於是就找到了 W3School的CSS3 :nth-child() 選擇器，看到了這樣一個代碼：

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

class="editr__result active" name="editr_09a81fc" src="http://blog.cssforest.org/demo/%E5%85%B3%E4%BA%8Enth-child%E7%9A%84%E7%96%91%E6%83%91/index.html" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(204, 204, 204); padding: 0px; top: 0px; width: 478.797px; height: 448.875px; box-sizing: border-box; position: absolute !important; display: block; left: 319.188px; border-radius: 3px; margin-bottom: 5px; max-width: 100%; background: rgb(39, 40, 34);">

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

感覺有點奇怪，我原本以爲應該會是前三個段落被選中，像這樣：

class="editr__result active" name="editr_4389dc4" src="http://blog.cssforest.org/demo/%E5%85%B3%E4%BA%8Enth-child%E7%9A%84%E7%96%91%E6%83%91/index.html" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(204, 204, 204); padding: 0px; top: 0px; width: 798px; height: 448.875px; box-sizing: border-box; position: absolute !important; display: block; border-radius: 3px; margin-bottom: 5px; max-width: 100%; background: rgb(39, 40, 34);">

一定是哪裏不對了。來看看它的說明：

: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>加個父元素試試：

class="editr__result active" name="editr_ff56209" src="http://blog.cssforest.org/demo/%E5%85%B3%E4%BA%8Enth-child%E7%9A%84%E7%96%91%E6%83%91/index.html" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(204, 204, 204); padding: 0px; top: 0px; width: 478.797px; height: 448.875px; box-sizing: border-box; position: absolute !important; display: block; left: 319.188px; border-radius: 3px; margin-bottom: 5px; max-width: 100%; background: rgb(39, 40, 34);">

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”，則對其應用樣式規則。

class="editr__result active" name="editr_3bc4dac" src="http://blog.cssforest.org/demo/%E5%85%B3%E4%BA%8Enth-child%E7%9A%84%E7%96%91%E6%83%91/index.html" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(204, 204, 204); padding: 0px; top: 0px; width: 478.797px; height: 448.875px; box-sizing: border-box; position: absolute !important; display: block; left: 319.188px; border-radius: 3px; margin-bottom: 5px; max-width: 100%; background: rgb(39, 40, 34);">

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;
}

class="editr__result active" name="editr_f9834b8" src="http://blog.cssforest.org/demo/%E5%85%B3%E4%BA%8Enth-child%E7%9A%84%E7%96%91%E6%83%91/index.html" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(204, 204, 204); padding: 0px; top: 0px; width: 478.797px; height: 448.875px; box-sizing: border-box; position: absolute !important; display: block; left: 319.188px; border-radius: 3px; margin-bottom: 5px; max-width: 100%; background: rgb(39, 40, 34);">

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，所以很容易就忽略了上面出現的問題，也是提個醒吧。