一、css3新增的选择器
属性选择器
- 根据元素的属性及属性值来选择元素；
- 语法：
元素名称[相关属性] { css样式 }
1.属性名选择元素
- 语法：
标签选择器[属性] {}。 - 通过某一个属性选择元素。
2.属性值选择元素
- 语法：
标签选择器[属性=属性值] {} - 通过某一个属性和属性值选择元素；
- 注意：属性值的引号可以省略不写；
3.属性值以某一个字符开头
- 语法：
标签选择器[属性^=属性值里面的字符]； - 通过某一个属性选择元素，但是属性值必须是以某一个字符开头的。
- 注意： ^= 后面的值不能是纯数字或者以数字开头，必须是字母。
4.属性值以某一个字符结尾
- 语法：
标签选择器[属性$=属性值里面的字符]。 - 通过某一个属性选择元素，但是属性值必须是以某一个字符结尾的。
- 注意： $= 后面的值不能是纯数字或者以数字开头，必须是字母
5.属性值包含某一个字符
- 语法：
标签选择器[属性*=属性值里面的字符]。 - 通过某一个属性选择元素，但是属性值不管在什么位置只要包含某一个字符即可选中；
- 注意：
*=后面的值不能是纯数字或者以数字开头，必须是字母
结构伪类选择器
- css3结构伪类选择器根据html的结构顺序来选择元素，比如选择第一个，最后一个，某一个等；
1.:nth-child 选择器
- 通过nth-child选择元素是将这个父级盒子中的所有子元素依次排序，然后按照对应的顺序选择元素，不会将元素分类。
- 查找方法：先查看位置，然后再去匹配是不是对应的标签，如果选择的位置元素不匹配则不会渲染样式；
- 第一个元素
:first-child {}
- 选择结构中指定的第一个元素；
- 最后一个元素
:last-child {}
- 选择结构中指定的最后一个元素。
- 倒数第几个
:nth-last-child(n)
- 选择结构中指定的倒数第n个元素；
- 某一个元素
nth-child(n)
- 选择结构中指定的第n个元素；
n的取值：
- 直接取值为n
- 表示选中所有的该标签
- 取值为关键字odd或者even
- odd 表示取值为奇数.
- even 表示取值为偶数;
- 取值为数学公式
- 2n表示偶数；
- 2n+1 表示奇数；
- 3n表示取值为3的倍数；
- n+3表示从第3个开始一直选择到最后一个；
- -n+3表示表示前3个；
2.:nth-of-type选择器
- 选择元素的规则： 先将父级里面元素分类（比如班级里的学生分为男生和女生）并且各自排序，然后再去匹配位置；
- 第一个元素
:first-of-type;
- 选择父元素下某一类元素的第一个元素;
- 最后一个元素
:last-of-type;
- 选择父元素下某一类元素的最后一个元素
- 某一个元素
:nth-of-type(n);
- 选择器父元素下某一类标签中的第n个元素;
- 注意： nth-of-type(n) 中 n的取值和nth-child是一样的
二、伪元素
- 伪元素可以帮助我们利用CSS创建新标签元素，而不需要在HTML结构中书写该html标签，从而简化HTML结构；
- 新创建的这个元素在html结构中是找不到的，所以我们称为伪元素；它不是真正意义上的元素；
伪元素的分类
::before
- 在元素内容前面插入一个伪盒子
.box::before { content: ''; }
::after
- 在元素内容后面插入一个伪盒子
.box::after { content: ''; }
伪元素注意事项和特点
- 伪元素必须添加给双标签，如果加给单标签是不生效的；
- 伪元素设置的时候必须添加content属性，否则不生效，哪怕是空的也要设置空的引号；
- 伪元素的显示模式默认是行内元素的特点，直接设置宽高是无效的，我们需要转化；
- 伪元素的权重值为0001；
