前言
关于CSS选择器的那些事儿，在项目开发过程中我们常常用到选择器，利用CSS选择器能实现一些酷炫的样式需求，减少必要的代码量，同时也能减小后期样式更改的时间成本，避免样式串连混乱等情况。以下都是知识点
一、元素选择器
通配符选择器： * { }
选中页面中所有的元素标签名选择器： 元素名 { }
选中页面中所有的指定标签id选择器： #id { }
选中具有指定id的元素(不建议用id写样式)类名选择器： .class { }
.加class类名的选择器分组选择器：选择器1，选择器2，....,选择器n { }
几个选择器选中的元素 共用一套样式
二、关系选择器
子代选择器：
父元素>子元素{ }后代选择器（空格隔开）：
祖先元素 后代元素{ }相邻选择器：
+ 选中某个元素之后的 相邻下一个元素兄弟选择器：
~ 选中某个元素之后的 其他的兄弟元素
三、其他伪类选择器
:focus 元素获取焦点时的样式
:not(css选择器) 选择不含有某个选择器的元素
// 不区分元素类型:first-child 选中第一个子元素
:nth-child(n) 选中第n个元素
:last-child 选中最后一个子元素
// 区分元素类型:first-of-type 选中第一个指定元素
:last-of-type 选中最后一个指定的元素
:nth-of-type(n) 选中第n个指定的元素
特殊选择方式
// 大于等于3的元素:nth-of-type(n+3)
// 奇数行:nth-child(odd)
:nth-child(n+1) :nth-child(2n-1)
// 偶数行:nth-child(even)
:nth-child(2n)
// 前三行:nth-child(-n+3)
// 第五个后的所有元素:nth-child(n+5)
// 倒数第3个元素:nth-last-child(3)
// 倒数第三个之前的元素:nth-last-child(n+3)
四、伪元素选择器
伪元素选择器可以利用css创建标签元素，而不需要HTML标签，简化HTML结构
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
一定要与content：一起使用
content： 内容, content 可以未空, 但必须要有
// 可用于清除浮动
.one::before, .one::after{
content:'';
display:table;
clear:both;
}
// 通用样式
selector:after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0px;
right: 0;
height: 0px;
width: 0px;
background-color: ;
}
::first-line，为某个元素的第一行文字使用样式。
::first-letter，为某个元素中的文字的首字母或第一个字使用样式。
::selection，对光标选中的元素添加样式。
