1.属性选择器：
[id=test] {…} 选择id=test字符串的元素
[id*=test] {…} 选择id存在test字符串的元素
[id^=test] {…} 选择id 以test字符串开头的元素
[id$=test] {…} 选择id以test结尾的元素
2.伪类选择器、伪元素：
p:first-line{…} 选择p元素中第一行的文字元素
p:first-letter{…} 选择p元素中的第一个文字元素
p:before{content:’…’} 选择p元素，在它之前插入一些内容
p:after{content:’…’} 选择p元素，在它之后插入一些内容
3.选择器root、not、empty、和target
:root{background: red;} 设置html文档的背景色
:not(p){…} 设置非p元素的背景色
:empty{…} 设置当元素内容为空时指定的样式
:target{…} 设置跳转到target元素的样式
4.选择器first-child、last-child、nth-child、和nth-last-child
li:first-child{…} 选择父元素中第一个子元素
li:last-child{…} 选择父元素中最后一个子元素
li:nth-child(2){…} 选择父元素第2个元素
li:nth-child(4n+4){…} 选择父元素第4的倍数
li:nth-last-child(2){…} 选择父元素倒数第2个元素
li:nth-child(add){…} 选择父元素中正数下来的奇数元素
li:nth-child(even){…} 选择父元素中正数下来的偶数元素
li:nth-last-child(add){…} 选择父元素中倒数上去的奇数元素
li:nth-last-child(even){…} 选择父元素中倒数上去的偶数元素
5.选择器nth-of-type、nth-last-of-type、和only-child
h2:nth-of-type(add){…} 选择针对同类型的子元素进行计算，选择正数下来的奇数元素
h2:nth-of-type(even){…} 选择针对同类型的子元素进行计算，选择倒数上去的偶数元素
li:only-child{…} 选择父元素中只有一个子元素的
6.UI元素状态伪类选择器 选择器e:hover、e:active、e:focue
a:hover{…} 选择当鼠标移入到某个元素上面使用的样式
a:active{…} 选择当鼠标按下某个元素并且没有松开时使用的样式
a:focue{…} 选择当某个元素获得光标焦点时候使用的样式
7.伪类选择器e:enabled、和e:disabled
e:enabled{…} 用来选择当前元素处于可用状态的样式
e:disabled{…} 用于选择当前元素处于不开用状态的样式
8.伪类选择器e:read-only、和e:read-write
e:read-only{…} 用来指定当元素处于只读状态的样式
e:read-write{…} 用来指定当元素处于非只读状态的样式
9.伪类选择器e:checked、e:default、和e:indeterminate、e::selection
e:checked{…} 用来指定当单选框或复选框处于选中状态的样式，火狐浏览器为-moz-checked
e:default{…} 用来指定当页面打开时默认处于选中状态时的样式，当用户改为非选中状态，样式依然存在
e:determinate{…} 用来指定当页面打开时，一组单选款中任何一个都没有选中时整组的样式，仅适用Opera
e::selection{…} 用来指定当元素处于指定状态时候的样式
10.通用兄弟元素选择器 e~e
div~p{…} 用来指定位于同一个父元素之中，某个元素之后的其他种类兄弟元素所使用的样式