现象：
CSS中出现多个相同元素需要获取，依次给所有元素写class或者id又太麻烦

方法：
使用CSS的:nth-child选择器

一：首先写一个div容器 里面写了五个div 颜色都设置为了红色（为了方便区分）

二：获取div中的第一个 改变他的颜色
使用:nth-child(number)
直接匹配第number个元素。参数number必须为大于0的整数。
括号里面的数字为第几个div根据这个数字可以选择你想要改变的div

三：也有其他方法 获取第一个div
使用:not(:first-child)

四：如果要改变多个div应该怎么写呢？
:nth-child(n+2) 其中nth-child表示第几个son，n+2表示从第二个开始(即所有的n都是取从0开始的自然数)

五：如果要获取除了最后一个所有的div呢
:nth-last-child(n+2) 这样获取除最后一个div中所有的div

六：第二种获取除最后一个元素的其他div的方法
使用:not(:last-child)

七：如果要获取除最后两个div以外其他所有的div
:nth-last-child(n+3) 在第五步的基础上修改数字

八： 获取2的倍数所有元素
:nth-child(an)
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

九：奇偶匹配
奇数匹配使用:nth-child(odd)
偶数匹配使用：:nth-child(even)
例子：

一、相邻兄弟 选择器 “xxx”+“xxx”：介于两个 选择器 之间，当第二个 元素 紧跟在第一个 元素 之后， 并且两个 元素 都是属于同一个父 元素 的子 元素 ，则第二个 元素 将被选中。 二、属性 选择器 通过属性来 选择 ，如div[class=“xxx”]就是div中class名为xxx的，a[href]就是a标签中包含href的 三、子 选择器 <meta charset="UTF - 8"> <meta name="viewport" content="width=device - width, initial - scale=1.0"> <meta http - equiv="X - ... 例如上图，如果想用 css 改变第二个div的样式，或者想改变<ul>中的<li>的样式，就需要使用 选择器 2. 选择器 分类： 选择器 分为基础 选择器 和复合 选择器 两大类，基础 选择器 是由单个 选择器 组成的，其中包括标签 选择器 ，类 选择器 ，id 选择器 和通配符 选择器 1）标签 选择器 ：用HTML标签名称作为 选择器 ，按标签名称分类，为页面中某一类标签 指定 统一的C... 如图，如果像 选择 类名为  class=exerciseInfo  中的第一个和最后一个div，做法如下： 选择 第一个类名： .exerciseInfo : nth - of - type(1) { ... }; 选择 最后一个类名： .exerciseInfo : last - child { ... }; 选择 其中一个 指定 的类名：.exerciseInfo : nth - of - type(x) { ... }...