CSS选择器以及如何区分伪类选择器和伪元素选择器

CSS选择器

 什么是选择器：使用css对HTML页面中的元素实现一对一，
 一对多或者多对一的控制

选择器的分类	样式
1：通用选择器	*{}
2：元素选择器	a{}
3: class类选择器	.lei{}
4: 属性选择器	[type=redio]{}
5: id选择器	#id{} //一个id只能有一个对应的元素
6：伪元素	：：before{}
7：伪类	：hover{}
8：组合选择器：	有四种组合方式 ：后代选择器(以空格分隔)、子元素选择器(以大于号分隔）、相邻兄弟选择器（以加号分隔）、普通兄弟选择器（以破折号分隔）
9：否定选择器	：not(.lei){}

其中比较容易弄混的就是伪元素选择器以及伪类选择器

伪类：伪类存在的意义是为了通过选择器格式化DOM树以外的信息 (比如： <a> 标签的:link、:visited等。这些信息不存在于DOM树中。)；还有不能被常规CSS选择器获取到的信息。(比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child来获取到。)只有一个：

伪元素：本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码），伪元素不是节点，它不会出现在DOM树中，但是在显示上会具备节点的效果
有两个：：

区别：
伪类与伪元素都是用于向选择器加特殊效果 ，伪类与伪元素的本质区别就是是否抽象创造了新元素 ，伪类只要不是互斥可以叠加使用， 伪元素在一个选择器中只能出现一次，并且只能出现在末尾

说到选择器便涉及到一个优先级的问题：
首先： ！important>内联样式>内部样式>外部样式
选择器的优先级中：最高的是ID选择器
紧接着是：类选择器、属性选择器、伪类选择器
再下来是：元素选择器、伪元素选择器
最后是：其他选择器
至于同级的选择器一般看在页面中出现的位置，后写的生效。

选择器的权重计算：

第一等：代表内联样式，如: style=” ”，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表class，伪类和属性选择器，如.content，权值为0010。
第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值