CSS選擇器之:nth-child(n)與:nth-last-of-type(number)

roland_reed 發布于2019-08-30 12:57 / 1039人閱讀

摘要：功夫不負有心人，找到了選擇器。定義和用法選擇器匹配屬于其父元素的第個子元素，不論元素的類型，從第一個子元素開始計數第一個子元素的下標是，不要和混淆，是。

這段時間在做一些東西，整理了其中遇到的一個關于CSS選擇器的問題。

需要完成一個下圖的側邊欄效果：

乍一看，很簡單嘛，標簽列表、彈框，完工！

然后我就寫了如下代碼：

基本樣式OK了，然后添加:hover等效果：

.primary-tag:hover {
    background-color: #F5F5F5;
}

等等，這時候好像發現些什么：

第一個與最后一個li標簽懸停時背景溢出了，沒關系，so eazy：

.tag li:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.tag li:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

嗯？怎么回事，first-child生效了，last-chilld沒有生效：

仔細思考了一下這兩個選擇器，發現：

li:first-child 是匹配父元素的第一個li元素

li:last-child 是匹配父元素的最后一個li元素

原來，因為彈框里面也存在li元素，所以last-child屬性匹配到了彈框里面的最后一個li，在不修改 HTML 的基礎上稍作修改：

li.a:first-child

li.a:last-child

這回總可以了吧，懷揣著希望，摁下了F5，我的天哪，還是原樣，一臉懵逼中~~~

仔細查了下資料：

li.a:first-child 匹配父元素中class為a的，且是第一個li

li.a:last-child 匹配父元素中class為a的，且是最后一個li

也就是說，最后一個li如果class為a，last-child生效；否則不生效（這里最后一個li還是匹配的彈框里的li，因為沒有class為a，所以選擇器失效，不會選中任何元素）。

許多人說：”僅通過CSS是無法實現的，需要通過jQuery.....省略一大段理由”（建立在不更改html結構標簽的基礎上），難道真的一個這么簡單的效果無法通過CSS實現嗎？

如果說不可以通過CSS實現，那一定是沒有好好了解全CSS的屬性選擇器。功夫不負有心人，找到了 :nth-child(n) 選擇器。

:nth-child(n)定義和用法

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不論元素的類型，從第一個子元素開始計數（第一個子元素的下標是 1，不要和JS混淆，JS是0）。

n 可以是數字、關鍵詞或公式。

例： li:nth-child(2)指定為ul下第二個li

所以，按照如下設置就能達到我們想要的效果：

.a:nth-child(1) {
    border-top-left-radius: 8px;    //匹配第1個class為a的元素
    border-top-right-radius: 8px;
}

.a:nth-child(5) {
    border-bottom-left-radius: 8px;  //匹配第5個class為a的元素
    border-bottom-right-radius: 8px;
}

:nth-child(n)更多設置：

Odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞。

在這里，我們為奇數 a 元素指定兩種不同的背景色，從最后一個子元素開始計數：

.a:nth-child(Odd) {
    color: #45E0B1;            //匹配class為a的奇數元素
}

偶數：

.a:nth-child(even) {
    color: #45E0B1;            //匹配class為a的偶數元素
}

其實還有一個能達到上圖這種效果，也就是:nth-last-of-type(n)選擇器。

:nth-last-of-type(number)定義和用法

:nth-last-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素，從最后一個子元素開始計數（第一個子元素的下標是 1，不要和JS混淆，JS是0）。

n 可以是數字、關鍵詞或公式。

:nth-last-of-type(number)更多設置

Odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞。

在這里，我們為奇數 a 元素指定兩種不同的背景色，從最后一個子元素開始計數：

.a:nth-last-of-type(Odd) {
    color: #45E0B1;            //匹配class為a的奇數元素
}

偶數：

.a:nth-last-of-type(even) {
    color: #45E0B1;            //匹配class為a的偶數元素
}

測試一下：

.a:nth-last-of-type(5) {
    color: #45E0B1;            //匹配class為a的從后往前數的第5個元素（也就是第一個）
}

.a:nth-last-of-type(1) {
    color: #26D7D7;            //匹配class為a的從后往前數的第1個元素（也就是最后一個）
}

最終效果：

其實很多時候，并不是沒有解決辦法或者說簡便的辦法，只是我們不知道，說明還懂得不夠，需要學習來充實自己。

GPU云服務器云服務器 numberic Numbers number css選擇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115194.html

css選擇器

摘要：前言選擇器是前端的基本功只要你是一個前端這個一定要掌握今天之所以要重溫一下選擇器主要是和大家再復習一下選擇器中的一些常用符號的使用例如等的使用之所以要復習呢是因為我一個寫后端的哥們前端寫的也很好但是他今天突然問我中加號和大于號是啥意思我說這前言 css選擇器,是前端的基本功,只要你是一個前端,這個一定要掌握!今天之所以要重溫一下css選擇器,主要是和大家再復習一下css選擇器中的一些常用符號...

番茄西紅柿 2019-04-23 13:36 評論0 收藏0
css選擇器大全

摘要：選擇器是的核心，從最初的元素選擇器，演進到偽元素偽類，以及中提供的更豐富的選擇器，定位頁面上的任意元素開始變得愈發的簡單。選擇器是CSS的核心，從最初的元素、class/id選擇器，演進到偽元素、偽類，以及CSS3中提供的更豐富的選擇器，定位頁面上的任意元素開始變得愈發的簡單。 1、元素選擇器這是最基本的CSS選擇器，HTML文檔中的元素本身就是一個選擇器： p {line-hei...

cyixlq 2019-08-29 12:39 評論0 收藏0
css3 偽類選擇器快速復習

摘要：前言如果說作為前端開發的基本功那么選擇器就是基礎中的基礎如果你在復寫或者學習這些容易令人混淆的選擇器那么你就來對地方了我的老伙計本篇文章會直接了當的比較它們的特性幫助你快速的掌握它們這兩個選擇器會匹配一前言如果說 css 作為前端開發的基本功, 那么選擇器就是基礎中的基礎. 如果你在復寫或者學習這些容易令人混淆的選擇器, 那么你就來對地方了, 我的老伙計. 本篇文章會直接了當的...

MasonEast 2019-08-30 15:44 評論0 收藏0
css選擇器總結

摘要：偽類選擇器之動態偽類序號選擇器名稱說明版本動態偽類選擇器未被訪問時動態偽類選擇器已被訪問時動態偽類選擇器鼠標以上時動態偽類選擇器訪問中跳轉頁面時動態偽類選擇器獲得焦點時是有順序的，其他順序可能無效，這是個坑。 1. 基本選擇器序號選擇器名稱說明 css版本 1 * 通用選擇器選擇所有元素，包括html和body 2 2 div,span 標簽選擇器根據標簽選擇...

DirtyMind 2019-08-30 15:52 評論0 收藏0