1.基本选择器
* 通配选择器
元素选择器 span
ID选择器 #ps
类选择器 .p
群组选择器 .p1,.p2.p3
注释:所有浏览器都兼容 IE，火狐，chrome 欧朋 Safari
2.层次选择器
div div a后代选择器 IE 都支持
div>div 子类选择器
div + p +span 相邻兄弟选择器（往下邻，不能往上）
div ~ span 通用选择器 （即和div同级，且在div后面的所有span元素）
注释： IE(7+)，火狐，chrome 欧朋 Safari（所有选择器都兼容的版本或浏览器）
3~8.伪类选择器
3.动态伪类选择器
：link 链接为被访问时
：visited 链接被访问后
：active 元素被激活后，常用于锚点等 IE（8+）
：hover 鼠标以上停留时
：focus 获取焦点时（用于input） IE（8+）
注释：IE，火狐，chrome 欧朋 Safari（所有选择器都兼容的版本或浏览器）
4.目标伪类选择器（目标伪类选择器是动态选择器，只有存在url指向该匹配元素时，样式效果才会生效）
：target IE（9+），火狐，chrome 欧朋（9.6+） Safari（所有选择器都兼容的版本或浏览器）
应用场景 高亮显示区域 （https://catalin.red/get-to-know-your-css3-target-pseudo-class/）
相互层叠盒子突出其中一个 （https://virtuelvis.com/gallery/css3/target/interface.html）
tabs效果 （https://css-tricks.com/css3-tabs/）
幻灯片效果（https://designmodo.com/slider-css3/）
灯箱效果
相册效果
5.语言伪类选择器
html文档开头的lang属性（http://www.w3school.com.cn/tags/html_ref_language_codes.asp）
6.UI元素状态伪类选择器
:checked 表单选中状态下
:enabled 启用表单元素时
:disabled 禁止元素时使用时
UI元素的状态包括：启用，禁用，选中，未选中，获得焦点，失去焦点，锁定和待机等
注释： IE（9+），火狐，chrome 欧朋 Safari（所有选择器都兼容的版本或浏览器）
7.结构伪类选择器
:root
:first-child
:last-child
:only-child()
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:first-of-type()
:last-of-type()
:only-of-type()
:empty
不同点（child结尾的结构伪类选择器按照子元素的顺序来读取，不分类型，而type结尾的选择器，则按类型读取【例如，十个li标签后面还有两个div，那么li:nth-of-type（11）是读取不到内容的】）
除了n以外，还有odd（基数）和even（偶数）
注释： IE（9+），火狐，chrome 欧朋 Safari（所有选择器都兼容的版本或浏览器）
8.否定伪类选择器
：not() 匹配所有元素，除了被选择元素外
形式:
[type="submit"]
footer
2n+1
[type="radio"]
9.伪元素
css伪元素
:first-line
:first-letter
:before
:after
css3调整后
::first-letter选择文本中的第一个字母
::first-line选择文本的第一行
::before在元素前面添加一个元素
::after在元素后面添加一个元素
（ ::first-line，::before，::after）多用于清除浮动，或者添加文字图标icon等，且不能给js检测到，多数配合content属性使用
::selection匹配突出显示的文字，选择器匹配被用户选取的选取是部分
只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。Firefox 支持替代的 ::-moz-selection。
注释：IE6~8只支持单冒号表示法，而现代浏览器则同时支持两种表示法，还有一个区别：单冒号和爽冒号在css3中主要用于区别伪类（以上伪类选择器）和伪元素
10.属性选择器
1.a[href] 匹配有href属性的a元素
2.a[href="javascript:;"] 匹配href元素的值为JavaScript:;的a元素
3.div[name|=val] 匹配name属性以val开头的所有元素
4.div[name~=val] （有时一个属性有多个值）匹配该属性中的有val值的元素
5.input[class*="demo"] 匹配class属性的值中，任意位置出现val的所有元素
6.input[class^=”demo“] 匹配class属性的值以val开头的所有元素
7.input[class$="demo"] 匹配class属性的值以val结尾的所有元素
网友评论