css选择器，伪类和伪元素的区别
一、总结
一句话总结：
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
伪类选择器：不修改dom内容，通过一些特定的选择器根据特定的状态，特定条件来修改元素的样式。 例如 :hover
伪元素：css3规定伪元素由两个冒号开头作为标示::,可能会改变dom结构，创建虚拟dom。 例如 ::before,::after
1、伪类选择器有哪些？
比如a标签的:hover等，比如input标签的:focus，比如那一大堆选择第几第几的，比如:first-of-type，还有一些其他的
2、伪元素选择器有哪些？
::before,::after //这两个伪类会在选择的元素的前面和后面创建虚拟dom 通常和content联合使用
::first-letter,first-line //这两个伪类只要用于改变选中元素内文本节点的第一个字母，第一行的样式
::selection //用于修改用户用鼠标选中的文本的样式，仅限于color、background、cursor、outline的修改。IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。Firefox 支持替代的 ::-moz-selection
二、css选择器，伪类和伪元素的区别
转自或参考：css选择器，伪类和伪元素的区别
https://www.cnblogs.com/muzs/p/10484174.html
1、类选择器：class名 =>p.info {} //选择class为info的所有p元素
2、id选择器： id名 => #info {} //选择id为info的元素 不能为多个元素同时设置相同的id
3、标签选择器：标签名 => div {} //选择所有的div
4、并列选择器：#info，.info, p {} //同时选择多个选择器
5、后代选择器：父选择器 子/孙选择器 或 父选择器>子选择器
div p {} //div内的所有p
div>p{} //div内仅邻的子元素p不包含p元素内部的p元素
6、兄弟选择器： div+p //选择每个紧跟在div元素后面的第一个p元素
p~ul //选择前面有p元素的所有ul元素
7、属性选择器：
[title] //选择所有有title属性的元素
[title=info] //选择所有title属性值为info的元素
[title~=info] //选择所有title属性值包含info的元素
[title|=info] //选择所有title属性值以info开头的元素
[title^=info] //选择所有title属性值以info开头的元素
[title$=info] //选择所有title属性值以info结尾的元素
[title$=info] //选择所有title属性值包含info的元素
8、伪类选择器：不修改dom内容，通过一些特定的选择器根据特定的状态，特定条件来修改元素的样式。
a{
:link => a 标签（默认）
:hover => 鼠标放在a标签
:active => 鼠标点a标签
:visited => a标签被访问过
}
input{//表单元素
:focus => 匹配已聚焦点的表单元素
:enabled => 匹配已经启用的表单元素（默认）
:disabled => 匹配禁用的表单元素
:checked => 匹配被选中的表单元素
}
:root =>匹配根元素即html
:not(p) =>选择不是p的所有元素
p:empty =>选择没有子节点的p，包括空格
:target =>用来修改被点击的a标签所对应的锚点的样式 eg：<a href="#mao1"></a> 点击这个a
对应的<p id="mao1"></p>样式会被修改
:lang(en) =>选择属性lang的值为en的元素
:first-of-type =>p:first-of-type //选择每个父容器内的第一个p元素
:last-of-type =>p:last-of-type //选择每个父容器内的倒数第一个p元素
:nth-of-type =>p:nth-of-type(2) //选择每个父容器内的第二个p元素
:nth-last-of-type =>p:nth-last-of-type //选择每个父容器内的倒数第二个p元素
:only-of-type =>p:only-of-type //选择每个只有一个p元素的父容器内的p元素（父元素可包含多个其他元素）
:only-child =>p:only-child //选择每个有且仅有一个p元素的父容器内的p元素
:first-child =>p:first-child//选择每个父容器中的第一个且为p的子元素
:last-child =>p:last-child//选择每个父容器中的最后一个且为p的子元素
:nth-child(n) =>p:nth-child(2)//选择每个父容器中的第二个且为p的子元素
:nth-last-child(n) => p:nth-last-child(2) //选择每个父容器中的倒数第二个且为p的子元素
9、伪元素：css3规定伪元素由两个冒号开头作为标示::,可能会改变dom结构，创建虚拟dom。
::before,::after //这两个伪类会在选择的元素的前面和后面创建虚拟dom 通常和content联合shiyong
::first-letter,first-line //这两个伪类只要用于改变选中元素内文本节点的第一个字母，第一行的样式
::selection //用于修改用户用鼠标选中的文本的样式，仅限于color、background、cursor、outline的修改。IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。Firefox 支持替代的 ::-moz-selection