css選擇器 nth-child

html代碼：

<div>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
</div>

 

一、nth-child

1.1、nth-child(n)     父元素下的第n個子元素，n必須大於0，索引都是從1開始。

div p:nth-child(2){
    background: skyblue;
}

 

ps、這里僅僅說是父元素的第幾個子元素，而並沒有限制該類型的子元素。比如：

<div>
    <h3>天氣</h3>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
</div>

運行之后：

 

1.2、nth-child(odd)   父元素下的奇數子元素  等同於 nth-child(2n-1)

div p:nth-child(odd){
    background: skyblue;
}

ps、這貨是區分子元素類型的，比如：

<div>
    <h3>天氣</h3>
    <h3>天氣</h3>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
</div>

 

1.3、nth-child(even)  父元素下的偶數子元素 同樣區分子元素類型   等同於nth-child(2n)

div p:nth-child(even){
    background: skyblue;
}

 

1.4、nth-child(an+b)   公式計算 n可以為0

div p:nth-child(2n+1){
    background: skyblue;
}

ps、區分子元素類型的，父元素的an+b個子元素，但是該元素必須是p

 

1.5、first-child   選擇父元素下的第一個子元素 如果第一個子元素不是該類型，選擇不到  等同於 nth-child(1)

div p:first-child{
    background: skyblue;
}

 

1.6、last-child    選擇父元素下的最后一個子元素 如果最后一個子元素不是該類型，選擇不到

div p:last-child{
        background: skyblue;
}

 

二、nth-of-type  匹配屬於父元素的特定類型的第 N 個子元素的每個元素 忽略不是該類型的元素的存在

<div>
    <h3>天氣</h3>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
    <p>多雲轉晴</p>
</div>

div p:nth-of-type(1){
    background: skyblue;
}