3.1 基礎選擇器
3.1.1 標簽選擇器
標簽選擇器一般用于定義全局樣式；
bootstrap中關于標題的全局定義：
h1,h2,h3,h4,h5,h6{
margin: 10px, 0;
font-family: inherit;
font-weight: bold;
line-height: 20px;
color: inherit;
text-rendering: optimizelegibility;
}
h1,h2,h3{
leng-height: 40px;
}
h1{font-size: 38.5px;}
h2{font-size: 31.5px;}
h3{font-size: 24.5px;}
h4{font-size: 17.5px;}
h5{font-size: 14px;}
h6{font-size: 11.9px;}
3.1.2 類選擇器
又稱class選擇器；
注：從代碼可讀性和可維護性上說，最好不要給一個標簽增加多余兩個class屬性；盡量為class指定有意義的名字。
3.1.8 屬性選擇器
類似jQuery中的屬性選擇器，但有區別
$("div[id=test]")
div[id="test"]{
/*style*/
}
使用通配符進行模糊匹配，語法跟jQuery選擇器相同，區別在引號;
a[src^="https"] /*以https開頭*/
a[src$=".pdf"] /*以.pdf結尾*/
a[src*="abc"] /*屬性中包含abc字符串*/
3.1.10 復合選擇器
應用復合選擇器時，標簽選擇器一定要寫在最前面，否則無法識別
3.2 偽類選擇器
- :nth-child(n)，與jQuery的子元素選擇器相同；
- :nth-last-child(n)，與nth-child(n)類似，只是這里從最后一個元素開始計數
- :nth-of-type(n)，類似于:nth-child(n)，區別在于：li:nth-child(3)，一旦第三個元素不是li元素，選擇器就不會起作用；p:nth-of-type(3)查詢的是第三個p元素；如果不加標簽類型，會自動選擇所有并列元素的第n個。
- :nth-last-of-type(n)，類似于:nth-of-type，區別在于從最后一個開始計數
- :last-child，選擇元素的最后一個子元素。
注：:last-child是CSS3新增的偽類選擇器，:first-child在CSS2種就已經加入了。IE6不支持:first-child，IE6-8不支持:last-child；
- :only-child，與jQuery類似，如果父元素只有一個子元素，如果有限定條件嗎，則取交集。 div p:only-child，選取div中唯一的子元素p
- :only-of-type，基本等同:only-child，區別在于不加限定條件的情況下，:only-of-type會選取body元素；
- :root，選取根元素，即html標簽
- :empty，選擇沒有任何內容的元素
3.2.2 目標偽類:target
URL前面有錨名稱#，指向文檔內某個具體的元素，這個被鏈接的元素就是目標元素。:target選擇器可用于選取當前活動的目標元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<style>
:target{
background-color: #CCCCCC;
border: 1px solid;
}
</style>
</head>
<body>
<a href="#id1">id1</a> <!--點擊id1，目標位置變為樣式表設置-->
<a href="#id2">id2</a>
<div id="id1">asd</div>
<div id="id2">zxc</div>
<div id="id3">qwe</div>
</body>
</html>
3.2.3 狀態偽類
CSS3新增的偽類選擇器，用于表示表單元素的狀態，與jQuery中的表單對象屬性過濾選擇器相同；由于很多瀏覽器不支持CSS3，下面介紹如何用屬性選擇器代替狀態偽類；
- :enabled和:disabled
input:disabled{}
input[disabled] /*使用屬性選擇器達到狀態偽類的相同效果*/
- :checked
3.2.4 否定偽類
:not( selector )
div :not(.myClass){} /*選取div的子元素中，class不是myClass的元素*/
3.4 小結
- 標簽選擇器主要用于定義全局樣式
- 單一的類選擇器不要濫用，比較容易出現命名沖突等
- 可以使用通配符進行一些全局設置
- 子元素選擇器“>”和后代元素選擇器“空格”的區別；
- 組選擇器可以很好的縮減冗余代碼；
- CSS3之前的偽類選擇器有:link, :visuted, :hover, :active, :first-child, :lang
