CSS选择器记录

作者: cdgogo 文章链接: https://segmentfault.com/a/1190000016563980

前言：

我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。

1. 相邻兄弟选择器(+)

选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。

2. 兄弟选择器(~)

查找某一个指定元素的后面的所有兄弟结点。

3. 后代选择器

3.1 子选择器(>)

只能选择作为某元素儿子元素的元素，不包括孙元素、曾孙元素等等等。

3.2 :first-child 选择器

3.3 :last-child 选择器

这俩就不多说了 顾名思义

3.4 :nth-child() 选择器

该选择器选取父元素的第 N 个子元素，与类型无关。

选择器	描述
nth-child(3)	表示选择列表中的第三个元素。
nth-child(2n)	表示列表中的偶数标签，即选择第2、第4、第6……标签
nth-child(2n-1)	表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签
nth-child(n+3)	表示选择列表中的标签从第3个开始到最后（>=3）
nth-child(-n+3)	表示选择列表中的标签从0到3，即小于3的标签(<=3)
nth-last-child(3)	表示选择列表中的倒数第3个标签

3.5 :nth-of-type(n) 选择器

匹配属于父元素的特定类型的第 N 个子元素的每个元素.

3.6 :nth-last-child() 选择器

匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

选择器	描述
nth-last-child(7)	表示倒数第 7 个元素
nth-last-child(5n)	表示倒数的第 5、10、15 等元素
nth-last-child(-n+3)	表示一组兄弟节点中的最后三个元素。