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 (可以選中多個)