上午在寫一段HTML時CSS樣式時,需要對一個父元素下的最后兩個子元素的樣式進行額外的定義,由于以前沒有遇到過類似的需求,就仔細得查了下網上相似的案例,發現可以使用 CSS3 中的 “:nth-last-child() ”選擇器來實現此效果。

CSS3 :nth-last-child() 選擇器

:nth-last-child(n):匹配其父元素下的每個子元素,不論元素的類型,從最后一個子元素開始計數,n 表示第幾個元素。

PS:可能大家對上面的定義不是很好理解,不過可以通過下面的示例演示來理解。

例:CSS3 選擇倒數第二個元素

html代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 屬于其父元素下的所有類型為 p 元素的子元素,但從最后一個子元素開始計數 */
        p:nth-last-child(2) {
            color: red;
        }
    </style>
</head>
<body>
    <h1>飛鳥慕魚博客</h1>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
</body>
</html>

運行結果:

CSS3選擇倒數第幾個元素的方法,CSS3選擇元素,css倒數元素

邏輯解釋:

1、定位 p 元素的父元素,也就是 body 元素

2、集合所有 body 下的 p 元素

国产视频app3、從所有集合 p 元素中,查找倒數第二個元素

關于  :nth-last-child(n) 選擇器中的計數n的值

 :nth-last-child(n) 選擇器中的 n 參數,可以用數字,關鍵詞或公式來表示

例1:用數字表示

/* 這里的2可以是任合數字,但都從最后一個開始計數 */
p:nth-last-child(2) {
    color:red;
}

例2:用關鍵詞來表示

Odd 和 even 是可用于匹配下標是奇數或偶數的關鍵詞(計數從1開始)。

/*
odd:表示奇數,也就是單數
even:表示偶數,也就是雙數
*/        
p:nth-last-child(odd){
    color:#ff0000;
}
p:nth-last-child(even){
    color:#0000ff;
}

運行結果:

CSS3選擇倒數第幾個元素的方法,CSS3選擇元素,css倒數元素

例3:使用表達式

可以使用公式 (an + b)來定位元素的位置。

/*
an + b:表示周期的長度,n 是計數器(從 0 開始),b是偏移值(可加,可減)。
*/
p:nth-last-child(3n+1){
    color:#ff0000;
}

運行結果:

CSS3選擇倒數第幾個元素的方法,CSS3選擇元素,css倒數元素