The new CSS3 selectors:
Attribute Selector:
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）
Application: According to the suffix Recognition icon
Pseudo class selector:
Structure pseudo-classes:
: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 选中空元素
Application: interlaced color table
: nth-child (odd) { }
certain pseudo-class:
e:target{} 匹配所有的e元素,且匹配关联的元素
Application: Tab Settings
click on the link div1 show an id of div1
click the link to display an id div2 div2 the
click div3 link display elements with id div3
Application: accordion effect
UI state pseudo-classes:
:enabled{} 选中可用状态
:disabled{} 选中不可用状态
:checked{} 选中默认选中状态
::selection{} 选中用户选中的状态改变高亮(颜色)
Application: the selected state of the form
selected radio height width increases to 1
Dynamic pseudo-classes:
:link{} 选择被定义了超链接并未被访问过的元素，常用于链接描点上
:visited{} 选择被定义了超链接并已被访问过的元素，常用于链接描点上
:hover{} 选择被激活的元素，常用于链接描点和按钮上
:active{} 选择用户鼠标停留的元素，IE6及以下浏览器仅支持a:hover
:focus{} 用户行为选择器,元素获取焦点
Application:
: 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>
Select the second time:
Level Selector:
e > f: e元素下的所有子集f,不包括孙集
e + f: e元素后的第一个兄弟f (只选中了一个)
e ~ f: e元素后所有的兄弟f (选中不止一个)
for example:
.box a 选中后代,不论是儿子还是孙子,都选中box 下的 所有 a 都会被选中
.box>a 选中儿子,孙子不会被选中
p + a 只选中紧跟在p后的第一个a (只能选中一个)
p ~ a 选中p标签后的所有 a (可以选中多个)
