選擇器是制作網(wǎng)頁效果非常重要的一部分浪箭，學會對選擇器的使用劣挫，對網(wǎng)頁效果圖的控制至關重要枪汪。
下面主要羅列的幾個選擇器：
- 基礎選擇器
- 組合選擇器
- 屬性選擇器
- 偽類選擇器
- 偽元素選擇器
=====================
| 1倍阐、基本選擇器 | 作用 |
|---|---|
* |
通用選擇器主儡，匹配所有元素 |
tagName |
元素（標簽）選擇器仇箱，對應標簽名為tagName的標簽進行樣式設置 |
.className |
類選擇器县恕，對應類名為className的部分 |
#IDname |
ID選擇器，對應ID名為IDname的部分 |
選擇器書寫和樣例可以參考： CSS選擇器 - MDN
| 2剂桥、組合選擇器 | 作用 |
|---|---|
tagname1忠烛，tagname2 |
多元素選擇器，同時匹配所有tagname1或2权逗，兩個（或多個）之間用逗號分隔 |
T1 T2 |
后代元素選擇器美尸，匹配所有屬于T1元素后代的F元素，T1\T2之間用空格分隔 |
T1>T2 |
子元素選擇器斟薇，匹配所有T1元素的直接子元素T2 |
T1+T2 |
直接相鄰選擇器师坎，匹配緊隨T1元素之后的同級元素T2（僅選中一個） |
E~F |
普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否） |
.class1.class2 |
id和class選擇器和選擇器連寫的時候中間沒有分隔符堪滨，. 和 # 本身充當分隔符的元素屹耐。這樣子僅選中一個元素 |
空格與大于號的區(qū)別需要注意，且可以通過>這種組合方法來使得匹配更加嚴格椿猎。
直接相鄰選擇器僅選中一個同類元素惶岭，而普通相鄰選擇器選中不止一個元素且不需要直接（緊密）相鄰。
| 3犯眠、屬性選擇器 | 作用 |
|---|---|
| E[attr] | 匹配所有具有屬性attr的元素按灶，div[id]就能取到所有有id屬性的div |
| E[attr = value] | 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div |
| E[attr ~= value] | 匹配所有屬性attr具有多個空格分隔筐咧、其中一個值等于value的元素 |
| E[attr ^= value] | 匹配屬性attr的值以value開頭的元素 |
| E[attr $= value] | 匹配屬性attr的值以value結尾的元素 |
| E[attr *= value] | 匹配屬性attr的值包含value的元素 |
注：這部分內容和正則的使用相關
| 4鸯旁、偽類選擇器 | 作用 |
|---|---|
E:first-child |
匹配父元素的第一個子元素 |
E:link |
匹配所有未被點擊的鏈接 |
E:visited |
匹配所有已被點擊的鏈接 |
E:active |
匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素 |
E:hover |
匹配鼠標懸停其上的E元素 |
E:focus |
匹配獲得當前焦點的E元素 |
E:nth-child(n) |
匹配E的父元素的第n個子元素量蕊，第一個編號為1 |
E:last-child |
匹配父元素的最后一個子元素铺罢，等同于:nth-last-child(1) |
偽類選擇器往往表示元素的一個狀態(tài)，對不同狀態(tài)進行css設置残炮。除了上述常用的之外韭赘，還有E:enabled/disabled 來 匹配表單中可用/禁用的元素 ; E:checked匹配表單中被選中的radio或checkbox元素; E::selection 匹配用戶當前選中的元素。
關于E:nth-child(n)势就， 注意E元素必須得有父元素泉瞻，然后它會尋找同類的元素E（類名E或者標簽名E相同）脉漏，若在尋找時第n個位置被不同元素的位置占有則不生效。下圖中將.two類移到除第二個以外的位置均生效袖牙，但在算第n個時它也是占位的侧巨。
n的取值可以是 ：
- 1，2鞭达，3司忱，4，5 ...
- 4n+1,4n+2,4n+3,4n+4..etc （每四個設置不同的樣式）
- odd（奇數(shù)）, even（偶數(shù)）
注意兩者區(qū)別（空格）
div:first-child 選擇div父元素下的第一個且是div的子元素
div :first-child 選擇div元素下的第一個子元素
div:first-of-type 選擇的是父元素下每一類的第一個畴蹭，例如下例子中被選中的是p[a]&h3[b]
<style>
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">a</p>
<h3 class="item1">b</h3>
<h3 class="item1">c</h3>
</div>
a:link, a:hover, a:active, a:visited 的書寫順序及原因
書寫順序 ：
- a:link
- a:visited
- a:hover
- a:active
因為上面四個樣式的權重是一樣坦仍，寫在后面的樣式會覆蓋前面的樣式。即觸發(fā)了后面的事件后若無釋放則會一直覆蓋前面的樣式撮胧，說到底還是CSS層疊性的問題：
- 若無任何操作，則顯示
a:link - 若已經(jīng)訪問老翘，則
a:visited會覆蓋a:link芹啥，所以a:visited在a:link之后（若把a:visited放在最后，則觸發(fā)過visited之后前面的樣式就會被覆蓋了無法再次觸發(fā)） - 無論是否訪問铺峭，鼠標經(jīng)過時
a:hover需要生效墓怀，所以寫在a:link和a:visited后 - 當點擊時則只會顯示
a:active，所以寫在最后
| 5卫键、偽元素選擇器 | 作用 |
|---|---|
E::first-line |
匹配E元素內容的第一行 |
E::first-letter |
匹配E元素內容的第一個字母 |
E::before |
在E元素之前插入生成的內容 |
E::after |
在E元素之后插入生成的內容 |
可以兩個冒號也可以一個冒號傀履，老IE對兩個冒號不兼容，但兩個冒號是CSS3的新寫法莉炉，更加規(guī)范钓账。
注意對于偽元素選擇器，必須加content屬性絮宁，如下例梆暮，則content中的內容會加入到main內部，作為第一個子元素绍昂，內容是necessary
.main::before {
content: "necessary"; }
部分參考： CSS選擇器筆記 - 阮一峰
=====================
<br />
選擇器的使用經(jīng)驗
- 遵守 CSS 書寫規(guī)范（可參考這篇文章）
- 使用合適的命名空間
- 合理的復用class
選擇器的優(yōu)先級
- !important
- 內聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
