CSS3的nth-child选择器的使用

女爷i 2022-05-28 08:56 243阅读 0赞

在w3school网站上,对于 `nth-child` 的解释十分含糊,以至于我一段时间认为,这个东西实在没什么大用.可是,当我研究透了之后,我猛然间发现,这家伙实在是太厉害了啊!!当我们把 `nth-child` 这个选择器用到极致的时候,可以说,我们在处理任何列表的时候,是不需要给这些列加上`class`的.

## 有哪些 `nth-child` ? ##

`nth-child` 不仅仅只有一个,而是有一系列的这样的选择器,可以供我们在各种情况下使用.

:first-child
    :first-of-type
    :last-of-type
    :only-of-type
    :only-child 
    :nth-child(n)   
    :nth-last-child(n)
    :nth-of-type(n)
    :nth-last-of-type(n)
    :last-child

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10

具体每个有什么差异,可以[CSS 选择器参考手册][CSS]页面进行查询.

今天,我们着重来讲的是 `nth-child`

## `nth-child`研究开始 ##

为了简单方便,我下面用这种方式在文章中演示我需要的效果

如上表所示:   
○ 代表没有选中   
● 代表我要选择的元素   
下面的数字,表示是第几个

### 构建DOM结构 ###

<!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>nth-child</title>
    </head>
    <body>
        <ul class="list">
            <li>这是列表第1行</li>
            <li>这是列表第2行</li>
            <li>这是列表第3行</li>
            <li>这是列表第4行</li>
            <li>这是列表第5行</li>
            <li>这是列表第6行</li>
            <li>这是列表第7行</li>
            <li>这是列表第8行</li>
            <li>这是列表第9行</li>
            <li>这是列表第10行</li>
        </ul>
    </body>
    </html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21

### 开始实践CSS代码,为方便研究,我们现给一段基础CSS代码 ###

ul.list { width: 500px;margin: 100px auto;}
    ul.list li { width: 30px;height: 30px;border-radius: 50%;overflow: hidden;text-indent: -9999px;background: #f60;float: left;margin: 0 10px;}

*  1
 *  2

通过上面的css,我们可以在浏览器中看到,这是个LI都变成了黑色的圆点.如下表所示

好,我们开始演示

#### 选择第N个LI ####

ul.list li:nth-child(3){ background: #000;}

*  1

如上面的CSS所示,如果要选择第三个,就写3即可.

这是最简单的.我们可以使用这种方法,给不同的li加上不同的样式,如果你有需要,都可以分别订制的.

如果是第一个,或者最后一个,写法还可以更改为

/* 第一个 */
    ul.list li:first-child{ background: #000;}
    /* 最后一个 */
    ul.list li:last-child{ background: #000;}

*  1
 *  2
 *  3
 *  4

> 这里需要说明一下,那就是,这里的数字,和JS或者其他编程语言是不一样的.一般的编程语言是从0开始为第一个,而这里,可能是顾及我们一般的csser的编程基础可能不时很好,所以,1就是1,而不是1是0.

#### 选择前三个 ####

ul.list li:nth-child(-n+3){ background: #000;}

*  1

这是选择前三个的方法.

#### 选择从第四个开始到最后 ####

ul.list li:nth-child(n+4){ background: #000;}

*  1

#### 选择第四个到第八个 ####

ul.list li:nth-child(n+4):nth-child(-n+8){ background: #000;}

*  1

这里,其实就是把前面两种方法给集成了一下.

#### 选择奇数行 ####

ul.list li:nth-child(2n+1){ background: #000;}

*  1

这里,`nth-child`提供了一种简写的方法

ul.list li:nth-child(odd){ background: #000;}

*  1

#### 选择偶数行 ####

ul.list li:nth-child(2n){ background: #000;}

*  1

这里,`nth-child`也提供了一种简写的方法

ul.list li:nth-child(even){ background: #000;}

*  1

#### 选择3\\6\\9等三倍数行 ####

ul.list li:nth-child(3n){ background: #000;}

*  1

#### 选择2\\5\\8等三倍数行 ####

ul.list li:nth-child(3n+2){ background: #000;}

*  1

#### 选择1\\4\\7\\10等三倍数行 ####

ul.list li:nth-child(3n+1){ background: #000;}

*  1

通过上面几个例子,应该对倍数行,这种需要,全部理解了吧,再来一个例子

#### 选择 5\\10 等五倍数行 ####

ul.list li:nth-child(5n){ background: #000;}

*  1

下面来点高级的

#### 选择第三个到第九个之间的奇数行(不包括3\\9) ####

怎么做呢?看好了

ul.list li:nth-child(2n+1):nth-child(n+4):nth-child(-n+8){ background: #000;}

*  1

好,就是组合上面的多种条件,来达到我们需要的选择范围.

#### 选择第三个到第九个之间的奇数行(包括3\\9) ####

ul.list li:nth-child(2n+1):nth-child(n+3):nth-child(-n+9){ background: #000;}

*  1

通过上面的两个例子,应该学会了,怎么样组合多种条件,来选择了.

再复杂一点

#### 选择3位倍数+1的(1/4/7/10),其中的偶数 ####

ul.list li:nth-child(3n+1):nth-child(2n){ background: #000;}

*  1

## `nth-child`总结 ##

通过上面的各种例子,相信大家把没个例子都实践一遍之后,就能够深入的理解了.在实际的项目中,多多去运用,那么,便会逐渐的了然于胸了.

重要的是,理解它的语法,再结合你的需求,就基本能解决问题了.

## 此类选择器拓展 ##

提问,在不知道一共有多少个的情况下,如何选择最后两个??

当你对上面的知识点,了然于胸后,是不是大大的有成就感呢?那么,你知道上面这个问题应该怎么解决吗?

### 如何选择最后两个 ###

好吧,这个,是无法使用 `nth-child`这个选择器来解决的.

我们需要换一个选择器,这个选择器就是 `nth-last-child`.

`nth-last-child`选择器的用法,和 `nth-child` 选择器的用法是完全一致的,只有一个不同,那就是 `nth-child` 是从第一个开始计数的,而`nth-last-child`是从倒数第一个开始计数的

那么上面的问题,就有答案了.

ul.list li:nth-last-child(-n+2){ background: #000;}

*  1

### 如何实现反选? ###

什么是反选,举例,我要选择除了1\\4\\7\\10等三为倍数的数字之外的其他选项,如下表所示:

好玩了,这里我们需要再引入一个新的选择`:not()`

代码如何实现呢?

ul.list li:not(:nth-child(3n+1)){ background: #000;}

*  1

把你的条件,放在`:not()`的括号当中,就能够实现选择了.

好,我们再换一个例子.我们选择除了最后一个的其他所有.

#### 用反选的方法选择除了最后一个的其他所有. ####

方法1

ul.list li:not(:nth-last-child(1)){ background: #000;}

*  1

方法2

ul.list li:not(:last-child){ background: #000;}

*  1

方法2为简写的方法.方法1为原理性写法.

## 其他补充说明 ##

上面我们的DOM结构使用了`ul>li*10`这种结构,也就是说,在这种结构里面,是没有处理li之外的同级元素的.如果有其他元素是什么情况呢?

如果有其他元素的话,其他元素也会算在排队序列里面.因此,我们需要再了解两个选择器`:nth-of-type(n)` \\ `:nth-last-of-type(n)`.

这两个,就只计算相同的元素了.里面的语法呢,和`nth-child`是完全一致的.所以,这里我就不再详细的论述了.下面给一段例子,便于大家参考掌握

### 补充说明的演示DOM结构 ###

<!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <dl class="dl">
            <dt>第1个dt</dt>
            <dd>第1个dd</dd>
            <dt>第2个dt</dt>
            <dd>第2个dd</dd>
            <dt>第3个dt</dt>
            <dd>第3个dd</dd>
            <dt>第4个dt</dt>
            <dd>第4个dd</dd>
            <dt>第5个dt</dt>
            <dd>第5个dd</dd>
        </dl>
    </body>
    </html>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21

要实现的效果如下,选择`dt`的偶数和dd的奇数,

> DT用圆形演示   
> DD用矩形演示\\

### 补充说明的CSS演示 ###

dl.dl { width: 500px;margin: 100px auto;}
    dl.dl dt { width: 30px;height: 30px;border-radius: 50%;overflow: hidden;text-indent: -9999px;background: #f60;float: left;margin: 0 10px;}
    dl.dl dd { width: 30px;height: 30px;border-radius: 5px;overflow: hidden;text-indent: -9999px;background: #f60;float: left;margin: 0 10px;}
    dl.dl dt:nth-of-type(2n){ background: #000;}
    dl.dl dd:nth-of-type(2n+1){ background: #06f;}

[CSS]: http://www.w3school.com.cn/cssref/css_selectors.asp