CSS3選擇器:nth-child與:nth-of-type區(qū)別

一、:nth-child

1.1 說(shuō)明

:nth-child(n)選擇器匹配屬于其父元素的第N個(gè)子元素，不論元素的類型。n可以是數(shù)字、關(guān)鍵詞或公式。

注意：如果第N個(gè)子元素與選擇的元素類型不同則樣式無(wú)效！

1.2 示例

<style>
div>p:nth-child(2){
    color:red;
}
</style>
<div>
    <p>我是第1個(gè)段落</p>
    <p>我是第2個(gè)段落</p><!--符合條件：1、是<p>元素，2、父元素<div>的第二個(gè)元素。這里被選擇，會(huì)變成紅色。-->
    <p>我是第3個(gè)段落</p>
</div>
<div>
    <p>我是第1個(gè)段落</p>
    <span>我是第1個(gè)文本</span><!--不符合條件：不是<p>元素，沒(méi)有被選擇-->
    <p>我是第2個(gè)段落</p>
</div>

1.3 改進(jìn)

如果想讓上面第二個(gè)<span>生效的可以去除子元素<p>的選擇，寫一個(gè)父元素<div>加一個(gè)空格，以防止:nth-child不生效。

<style>
div :nth-child(2){ //div+空格，只根據(jù)父元素選擇
    color:red;
}
</style>
<div>
    <p>我是第1個(gè)段落</p>
    <span>我是第1個(gè)文本</span><!--符合條件-->
    <p>我是第2個(gè)段落</p>
</div>

二、:nth-of-type

2.1 說(shuō)明

:nth-of-type(n)選擇器匹配屬于父元素的特定類型的第N個(gè)子元素的每個(gè)元素。n可以是數(shù)字、關(guān)鍵詞或公式。

2.2 示例

<style>
div>p:nth-of-type(2){
    color:red;
}
</style>
<div>
    <p>我是第1個(gè)段落</p>
    <p>我是第2個(gè)段落</p><!--符合條件：1、是特定元素類型<p>，2、是父元素<div>的第二個(gè)<p>元素。這里被選擇，會(huì)變成紅色-->
    <p>我是第3個(gè)段落</p>
</div>
<div>
    <p>我是第1個(gè)段落</p>
    <blockquote>第1個(gè)引用</blockquote>
    <p>我是第2個(gè)段落</p><!--符合條件：1、是特定元素類型<p>，2、是父元素<div>的第二個(gè)<p>元素。這里被選擇，會(huì)變成紅色-->
    <p>我是第3個(gè)段落</p>
</div>

CSS3選擇器:nth-child與:nth-of-type區(qū)別