目前主要有四类选择器：组合选择器、伪类选择器、结构性伪类选择器、伪元素选择器。每类选择器的具体用法如下：
一、组合选择器
组合选择器优先级：
继承的优先级最低，所以比较优先级一点要在精准控制元素的基础上进行比较。
1、先比较id 个数 个数高的，优先级高
2、如果id个数相等，比较class选择器个数
3、再比较标签选择器数目
二、伪类选择器
伪类选择器 用于向某些选择器添加特殊的效果
link 未被点击的链接
visited 已被点击的链接
active 选定的时候
hover 鼠标悬停的时候
三、伪元素选择器
css3新增。通过样式的方式在元素后面添加内容 字面意思假的元素。
1、 ::first-letter 第一个字
2、 ::first-line 第一行（以浏览器为准的第一行）
3、 ::selection 被选中的字行（鼠标选中的字段）只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
4、 ::before 和 ::after
必须带一个content属性；
在内部内容的前面或者后面插入内容；
当插入的内容定义宽高和其他属性时，其实就是一个盒子（必须通过display转换，因为默认是一个行内元素）；
注意：input不能使用伪元素。（为什么input不支持伪元素(:after,:before)？）
四、结构性伪类选择器
结构性伪类选择器 根据嵌套结构选择元素。属于css3部分,低版本浏览器不 兼容
1、li:first-of-type
/*选择父元素里面的第一个li元素 无视其他元素*/ = li:nth-of-type(1)
在下面的代码中，p1和p5均被选中。
<div class="content"> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> <span>span1</span> </div> <p>p5</p>
2、li:last-of-type /*选择父元素里面的倒数第一个li元素 无视其他元素*/
3、p:only-of-type /*选择父级元素里面唯一的p 可以存在其他子元素*/
4、li:first-child
/*选择父元素的第一个元素 并要求第一个元素为li*/
只能选择到上面元素的p1.
5、li:last-child /*选择父元素的倒数第一个元素 并要求这个元素为li */
6、p:only-child /*选择父元素中唯一的子元素p 不允许有其他子元素*/
7、p:nth-of-type(2） /*选择父元素中第二个p元素 无视其他元素*/
8、p:nth-last-of-type(2）/*选择父元素中倒数第二个p元素 无视其他元素*/
9、p:nth-child(2) /*选择父元素中第二个子元素 并要求此元素为p*/
10、p:nth-last-child(2)
11、p:not(.box) /*选择除了.box之外的p*/
12、E：first-line 表示E元素中的第一行
E：first-letter 表示E元素中的第一个字符