CSS选择器之:nth-child(n)与:nth-last-of-type(number)_html/css_WEB-ITnose

这段时间在做一些东西，整理了其中遇到的一个关于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个元素（也就是最后一个）}

最终效果：

其实很多时候，并不是没有解决办法或者说简便的办法，只是我们不知道，说明还懂得不够，需要学习来充实自己。