1. 类选择器 .
.xxx{ } 用class=“ ”
2. ID选择器#
#xxx{ } 用id=“ ”
3. 普遍选择器
布局中经常用到的
{ }
.xxx{ }代表类选择器
.xxx > * { } 代表xxx下的所有直接孩子 >代表父子类
.xxx > span{ } 代表选中xxx下的所有span直接孩子
.xxx span{ } 代表选中xxx下后代中的所有span
.xxx .yyy{ } 嵌套选择器 交集
.xxx，.yyy{ } 组合选择器 并集
div.xxx{ } 选中div中class为xxx的
4. 层次选择器
.xxx span{ } 空格代表后代 代表xxx下的span后代
.xxx>span{ } >代表子代 代表xxx下的所有span孩子
.xxx+span{ } +代表下一个兄弟元素 相连的元素
.xxx~span{ } ~代表之后的所有的兄弟元素
5. 属性选择器
div,span{ } 并集
[title] 选中有title属性的
div[title] 选中div中有title属性的
div[title=one] 选中div中有title属性的，并且属性值是one的
div[title^=t] 选中div中有title属性以t开头的 ^开头
div[title$=e] 选中div中有title属性以e结尾的 $结尾
div[title*=o] 选中div中有title属性的，值中包含o的 *包含
[class*=header] 选中class属性中有header属性值的元素
[type=radio][checked] 选中默认选中的radio
6. 伪类选择器
.xxx>:first-child{ } 选中每个xxx中的第一个元素
.xxx>:last-child{ } 选中每个xxx中的最后一个元素
.xxx>:nth-child(y){ } 选中每个xxx中的第y个元素 nth第几个元素
参数可以使自然数1,2,3…也可以是odd奇数，even是偶数关键字,还可以是3n+1…
.xxx>:nth-last-child(2) { } 选中每个xxx中的倒数第二个元素
.xxx>:first-of-type { } 选中每个xxx中的每种类型中的第一个孩子元素
.xxx>:last-of-type{ } 选中每个xxx中的每种类型中的最后一个孩子元素
.xxx>*:nth-of-type(y){ } 选中每个xxx中的每种类型中的第y个孩子元素
7. a标签伪类选择器
a:link{ } 未访问过
a:visited{ } 已访问过
a:hover{ } 悬停
a:active{ } 点击活动
8. 表单伪类选择器
input[name=username]:focus{ } 设置input的聚焦样式
input[type=text]:disabled{ } 选择禁用的元素
input[type=text]:enabled{ } 选择可用的元素
input[name=username]:valid{ } 对用户名进行简单验证，验证通过
input:required{ } 选中所有必填项
input:optional{ } 选中所有选填项
input[type=number]:in-range{ } 在范围内的样式
input[type=number]:out-of-range { } 在范围外的样式
9. 伪元素选择器
section div::before{ } 在所有的div之前操作
section div::after{ } 在所有的div之后操作
section div::first-letter{ } 选中div中的第一个字符，
section div::first-line{ } 选中div中的第一行文本
div::selection{ } 选中用户选择的文本
