css选择器，伪类和伪元素的区别

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