这是我参与2022首次更文挑战的第22天
一、CSS的现状
新增的CSS3特性有兼容性问题，ie9+才支持；移动端支持优于 PC 端；不断改进中；应用相对广泛。
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
新增选择器有：属性选择器； 结构伪类选择器；伪元素选择器。
二、属性选择器
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。
三、结构伪类选择器
1.结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。
2.nth-child（n）选择某个父元素的一个或多个特定的子元素（重点）
1）n 可以是数字，关键字和公式
2）n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…
3）n 可以是关键字：even 偶数，odd 奇数
4）n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )
3.结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。
4.区别：
1）nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配。
2）nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子。
5.小结
1）结构伪类选择器一般用于选择父级里面的第几个孩子。
2）nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配。
3）nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
4）关于 nth-child（n）我们要知道 n 是从 0 开始计算的，要记住常用的公式
5）如果是无序列表，我们肯定用 nth-child 更多
6）类选择器、属性选择器、伪类选择器，权重为 10。
