CSS3新增的选择器:
属性选择器:
1、E[attr]：只使用属性名，但没有确定任何属性值
2、E[attr=“value”]：指定属性名，并指定了该属性的属性值
3、E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的
4、E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的
5、E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的
6、E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value、E[attr|=“value”]：指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con）
应用：根据后缀识别图标
伪类选择器:
结构伪类:
:first-child{} 第一个子元素
:last-child{} 最后一个子元素
:nth-child(n){} 指定位置的子元素
2n 偶数 even
2n-1 奇数 odd
:first-of-type{} 指定类型的第一个子元素
:last-of-type{} 指定类型的最后一个子元素
:nth-of-type(n){} 指定类型,且指定位置的子元素
:root 直接选中根元素 html
:empty 选中空元素
应用:表格的隔行变色
:nth-child(odd){}
目标伪类:
e:target{} 匹配所有的e元素,且匹配关联的元素
应用：选项卡设置
点击div1链接显示id为div1的元素
点击div2链接显示id为div2的元素
点击div3链接显示id为div3的元素
应用：手风琴效果
UI状态伪类:
:enabled{} 选中可用状态
:disabled{} 选中不可用状态
:checked{} 选中默认选中状态
::selection{} 选中用户选中的状态改变高亮(颜色)
应用：选中表单的状态
选中单选1时宽度高度变大
动态伪类:
:link{} 选择被定义了超链接并未被访问过的元素，常用于链接描点上
:visited{} 选择被定义了超链接并已被访问过的元素，常用于链接描点上
:hover{} 选择被激活的元素，常用于链接描点和按钮上
:active{} 选择用户鼠标停留的元素，IE6及以下浏览器仅支持a:hover
:focus{} 用户行为选择器,元素获取焦点
应用：
:focus{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
input:focus{
background: pink;
}
</style>
</head>
<body>
<input type="text" />
<input type="text" />
<input type="text" />
</body>
</html>
选中第二个时：
层级选择器:
e > f: e元素下的所有子集f,不包括孙集
e + f: e元素后的第一个兄弟f (只选中了一个)
e ~ f: e元素后所有的兄弟f (选中不止一个)
举例说明：
.box a 选中后代,不论是儿子还是孙子,都选中box 下的 所有 a 都会被选中
.box>a 选中儿子,孙子不会被选中
p + a 只选中紧跟在p后的第一个a (只能选中一个)
p ~ a 选中p标签后的所有 a (可以选中多个)
