一、結構性偽類選擇器
1、根元素選擇器：
:root{border:5px solid red;} 【選取html根元素】
2、子元素選擇器：
ul > li{color:#009933;} 【所有子元素】
ul > li:first-child{color:#009933;} 【選擇第一個子元素】
ul > li:last-child{color:#009933;} 【第一代選擇器，選擇最後一個子元素】
ul li:first-child{color:red;} 【後代選擇器，范圍比>廣，對於中間隔了幾層不敏感】
li:first-child{color:red;} 【選擇li元素】
:first-child{color:red;} 【將根元素body當作了住】
s
ul > li:only-child{color:#009933;} 【單個子元素】
div > p:only-of-type{color:red;} 【選擇div下單個元素類型的那個子元素】
3、nth-child（n）系列
ul > li:nth-child(2){color:red;} 【nth-child（n）系列---第二個子元素】
ul > li:nth-last-child(2){color:red;} 【nth-child（n）系列---倒數第二個子元素】
div > p:nth-of-type(2){color:red;} 【選擇特定元素的子元素，第二個子元素必須為P】
div > p:nth-last-of-type(2){color:red;} 【選擇特定元素的子元素，倒數第二個子元素必須為P】
二、UI偽類選擇器（一般用來匹配表單控件）
input:enabled{border:1px solid red;} 【給未禁用表單添加樣式 】
input:disabled{border:1px solid blue;} 【給禁用表單添加樣式 】
input:checked{display:none} 【checked勾選框、display：none將使候選後表單隱藏】
input:default{display:none} 【將默認勾選的勾選框隱藏】
input:valid{border:1px solid green;} 【html表單加入元素required後添加驗證功能valid】
input:invalid{ border:1px solid red;} 【驗證是否合法有效（比如正確的郵箱格式）】
input:required{border:1px solid green;}
input:optional{border:1px solid red;} 【需求與非強制】
三、動態偽類選擇器(對鼠標懸停點擊的效果進行定義)
a:link{color:green;} 【未訪問】
a:visited{color:red;} 【已訪問】
a:hover{color:orange;} 【鼠標懸停】
a:active{color:black;} 【鼠標長按不松】
input:focus{border:3px solid blue;} 【選中文本框】
a:not([href*="baidu"]){color:red;} 【將baidu以外的超鏈接文/反選】
p:empty{display:none;} 【取消空元素】
p:lang(en){color:#00CC66;} 【選擇包含lang屬性且屬性值為en的元素】
b:target{color:#0066CC;} 【選定id錨點】
::selection{color:#003399;} 【圈選時變色】