css选择器选择前几个元素

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」

:nth-child(n)选择器的一些使用方法：

:nth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式

选择第1个到第6个
:nth-child(-n+6){}

这个表示选择列表中的标签从0到3，即小于3的标签
nth-child(-n+3)

• 选择第n个，n位数字

:nth-child(n)

• 选择列表中的偶数标签

:nth-child(2n)

• 选择列表中的奇数标签

:nth-child(2n-1)

• 从第几个开始选择【正方向范围】选择从第6个开始的，直到最后

:nth-child(n+6){}

• 正方向与负方向两者结合使用，可以限制选择某一个范围 【限制范围】选择第6个到第9个，取两者的交集

:nth-child(-n+9):nth-child(n+6){}

• 选择列表中的倒数第n个标签 n为数字

:nth-last-child(n)

• 表示选择列表中的第一个标签

li:first-child{background:#fff}

• 倍数写法

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

倍数分组匹配：

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

:nth-of-type() CSS 伪类   匹配同类型中的第n个同级兄弟元素。

:nth-of-type(n)：n可以是一个数字，一个关键字，或者一个公式

• p:nth-of-type(3)代表的就是，所有兄弟节点中找标签为p的

  #wrap p:nth-of-type(3) {
   background: red;
  }

  #wrap p:nth-child(3) {
  background: yellow;
  }

• odd（奇数）、even（偶数）

p:nth-of-type(even) {
     background: red;
}

nth-child系列包括first-child,last-child等等，都是只选择第n个元素，不管类型，然后匹配，所以无论如何，最多只有一项； nth-of-type是将元素分类，然后选择每一类中的第n个，然后匹配，所以如果没有复合限定，可能会有多个匹配项；

css的选择器归纳

• 类选择器（如：class="app"）

• ID选择器（如：id="app"）

• 标签选择器（如：body,div,p,ul,li）

• 后代选择器

  后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。

• 子选择器

  子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)

• 伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）

• 通用选择器（*）

• 群组选择器

  以，分隔(逗号分隔开需要修饰的模块名)。当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

• 相邻同胞选择器

  以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)。

• 属性选择器

  属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；

• 伪元素选择器

  所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器。

• 结构性伪类选择器

• UI元素状态伪类选择器