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

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

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

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

而後我就寫了以下代碼：

<ul class="tag radius-8">
    //標籤
    <li class="a"> code </li>
    <li class="a"> code </li>
    <li class="a"> code </li>
    <li class="a"> code </li>
    <li class="a"> code </li>
    
    //彈框
    <div class="secondary-tag-container radius-8" id="second-tag-div1">
        <!-- 彈出層內容區域 -->
        <div class="secondary-content radius-8" id="secondary-content1">
                 <!-- 二級標籤 -->
                 <div class="second-tag">
                       <li class="b"> code </li>
                       <li class="b"> code </li>
                       <li class="b"> code </li>
                       <li class="b"> code </li>
                       <li class="b"> code </li>
                       <li class="b"> code </li>
                 </div>
                                   
                 <!-- 跳轉按鈕container -->
                 <div class="skip-btn-container">
                      <!-- 跳轉按鈕 -->
                      <a class="skip-btn">Done</a>
                 </div>
         </div>                          
    </div> 
</ul>

基本樣式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

<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><p><p></li>
  
</ul>

因此，按照以下設置就能達到咱們想要的效果：

.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個元素（也就是最後一個）
}

最終效果：

其實不少時候，並非沒有解決辦法或者說簡便的辦法，只是咱們不知道，說明還懂得不夠，須要學習來充實本身。