Appearance
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) | 表示一组兄弟节点中的最后三个元素。 |