選擇器的種類有很多赚瘦，可以到 w3cschool 去看看了解一下苔悦。也可以在 慕課網(wǎng) 中實踐一下介时。
一狂魔、上下文選擇器
<style> h1 {font-size: 16px;} p {color:red;}
</style>
代碼中的 h1和p 就是選擇器蒜埋，他們是選擇器里面最常用的一種，叫做 標簽選擇器 毅臊。我們可以直接通過標簽元素來指定需要添加樣式的位置理茎。
如果我們需要為多個標簽添加同一種樣式時黑界，我們可以把它們組合在一起，每個標簽選擇器用“,”隔開皂林，如下：
<style> h1,h2,h3 { font-weight: bold; color: blue; }
</style>
這樣的組合我們叫它 分組選擇器 朗鸠。
后代組合選擇器
當我們想為下面的 article和aside 的段落文本分別設置不同的字號時，我們就可以用到 后代選擇器 了础倍，它們是在祖先元素和后代元素之間加了一個空格烛占，如代碼所示：
<style> article p { font-size: 12px; } aside p { font-size: 14px; }
</style>
后代選擇器有一個問題就是，祖先元素選擇的后代元素都會帶有樣式沟启，但是我們有時候并不需要所有的標簽都帶有樣式忆家，這個時候我們就要用到其他的選擇器了。
子選擇器
我們可以用DOM中的父子元素關系來選擇德迹，也就是 子選擇器 芽卿，兩個元素中間用“>”來連接，如代碼所示：
<style> article>p { font-size: 12px; }
</style>
同胞選擇器
我們也可以通過同胞關系來選擇胳搞，叫做 同胞選擇器 或者是 兄弟選擇器 卸例，這就意味著選擇器的標簽元素需要具有同一個父元素，它們之間用“+”來連接肌毅，例子：
<style> h2+p { font-size: 12px; }
</style>
并且需要注意的是： p 標簽必須是緊跟在 h2 標簽的后面筷转。
一般同胞選擇器
一般同胞選擇器中間用“~”連接。
<style> h2~p { font-size: 12px; }
</style>
一般同胞選擇器和同胞選擇器的區(qū)別就是悬而， p 標簽不一定是緊跟在 h2 標簽的后面呜舒。
通用選擇器
通用選擇器是使用通配符“ * ”，它可以匹配任何元素笨奠。比如：
*｛ color: green;
｝
它會導致所有文本和邊框都變成綠色袭蝗。這里有個小知識：
color屬性設定的是前景色。前景色既影響文本也影響邊框艰躺，但通常我們只用它設定文本顏色呻袭。
我們也可以這樣使用通用選擇器：
p* { color: green;
}
這樣只會把 p 包含的所有元素的文本變成紅色。
通用選擇器還有一個有意思的用法腺兴，就是可以用它構成一個 非子選擇器 左电，比如：
section*a { font-size: 1.3em;
}
代碼所表示的是，所有 section 的孫子元素页响，而非子元素的 a 標簽都會被選中篓足。這個從邏輯上來說也好理解，左邊的 section 代表通配符的父元素闰蚕，右邊的 a 代表通配符的子元素栈拖，而 * 就是所有中間元素的集合。
以上就是通過DOM的層次結構的“上下文”關系來表示的選擇器没陡。
二涩哟、id和類選擇器
id和類選擇器是我們在CSS中常用的選擇器索赏，它們可以更精確的定位到我們要添加樣式的標簽位置。只要在HTML標記中為元素添加id和class屬性贴彼，就可以通過id和類選擇器直接選擇潜腻。
可以給id和class屬性設定任何值，但不能以數(shù)字或特殊符號開頭器仗。
類選擇器
body 標簽包含的任何HTML元素都可以添加class屬性融涣，如：
<h1 class="specialtext">這是一個H1標簽</h1>
<p>這是一個段落。</p>
<p class="specialtext featured">這是另一個段落</p>
1精钮、類選擇器
然后我們就可以用類選擇器添加樣式了威鹿，類選擇器前面要加一個“ . ” ，后面跟著類名轨香，如下：
<style> p { font-family: helvetica,sans-serif; } .specialtext { font-style: italic; }
</style>
2忽你、標簽帶類選擇器
當然，需要更精確的也可以這樣寫：
<style> p { font-family: helvetica,sans-serif; } .specialtext { font-style: italic; } p.specialtext { color: red; } p.specialtext span{ font-weight: bold; }
</style>
第三個樣式只選擇帶 .specialtext 類的 p 弹沽，第四就更精確到 p 中的 span 元素了檀夹。
3、多類選擇器
同個標簽可以存在多個類屬性策橘，每個類都用空格分隔，要選擇兩個類名可以這樣寫：
<style> .specialtext.featured { font-size: 120%; }
</style>
注意：CSS類選擇器的兩個類名之間沒有空格娜亿，如果加了空格就變成了“祖先/后代”關系的上下文選擇器了丽已。
ID選擇器
ID與類的寫法相似，只不過id選擇器前面用“ # ”后面跟著id名买决，
<style> \#specialtext { font-style: italic; }
</style>
***
***
***
<p id="specialtext">這是一個特殊段落</p>
id還可以用于頁內(nèi)導航
<a href="\#bio">Biography</a>
這樣的鏈接就可以直接在頁面內(nèi)跳轉到具有id名為“bio”的標簽的位置沛婴。如果沒想好“href”中放什么鏈接，也可以用“#”來充當占位符督赤。
什么時候用id嘁灯，什么時候用類
1、什么時候用id
id的用途是在頁面中唯一地標識一個元素躲舌，強調(diào)的是唯一性丑婿。每個id名稱必須是不相同的，而且每個id名稱在頁面中只能用一次没卸。尤其是于JavaScript關聯(lián)時羹奉，相同的id可能會導致JS行為異常。通常我們在
2约计、什么時候用類
類的目的是為了標識一組具有相同樣式特征的元素诀拭，強調(diào)的是通用性。切不可亂用類煤蚌，這樣會增加需要編寫和維護的CSS量耕挨。
總結（來自知乎：Milo）
- ID具有唯一性细卧，Class具有普遍性。
- ID是唯一的筒占，所以盡量在結構外圍使用酒甸，通常用于頁面布局。
- Class是可重復的赋铝，所以盡量在結構內(nèi)部使用插勤，通常用于樣式定義。
- ID的樣式優(yōu)先級高于Class革骨。
三农尖、屬性選擇器
我們可能會遇到這樣的HTML代碼：
<img sec="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />
如果我們想要為帶有title屬性的圖片添加樣式，那么我們就可以用到 屬性名選擇器 了良哲，如下：
img[title] { border: 2px solid blue;
}
這時盛卡，圖片就會顯示2像素寬的藍色邊框。一般來說title屬性和alt屬性都是設定相同的值筑凫，增加可閱讀性滑沧。
屬性值選擇器
屬性值選擇器就更精確地定位我們所需要添加樣式的位置了。如下：
img[title="red flower"] { border: 4px solid green;
} 
只有在title屬性值為“red flower”時巍实，才會為圖片加上邊框樣式滓技。
屬性和值選擇器-多個值
[title~="hello"]{ color: red;
}
該例子為包含指定值的title屬性的所有元素設置樣式,適用于由空格分隔的屬性值。 測試
[lang|=en] { color: red;
}
該例子為帶有包含指定值的lang屬性的所有元素設置樣式棚潦。適用于由連字符分隔的屬性值令漂。 測試
設置表單樣式
input[type="text"]{ width: 50px; display: block;
}
input[type="button"]{ width:12opx; margin-left:35px;
}
選擇器參考手冊[attribute] 用于選取帶有指定屬性的元素。[attribute=value] 用于選取帶有指定屬性和值的元素丸边。[attribute~=value] 用于選取屬性值中包含指定詞匯的元素叠必。[attribute|=value] 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞妹窖。[attribute^=value] 匹配屬性值以指定值開頭的每個元素纬朝。[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
[attribute*=value] 匹配屬性值中包含指定值的每個元素骄呼。
四共苛、偽類
偽類與類相似，但它并沒有附加到標記中的標簽上谒麦，所以稱之為偽類俄讹，偽類分兩種：
- UI偽類 ，會在html元素處于特定狀態(tài)時绕德，為該元素應用CSS樣式患膛。
- 結構化偽類 ，會在標記中存在某種結構上的關系時耻蛇，為相應的元素引用CSS樣式踪蹬。
UI偽類
1胞此、鏈接偽類
針對連接的偽類一共有四個，也是我們常用偽類跃捣，它們的順序也始終是這樣的：
a:Link {color: black;} a:visited {color: grey} a:hover {text-decoration: none;} a:active {color:red;}
一個冒號（:）表示偽類漱牵，兩個冒號（::）表示CSS3新增的偽元素。
很多時候不一定要將四個元素都寫出來疚漆。而且這些偽類也可以用于任何元素酣胀，如下：
p:hover {background-color: grey;}
這條代碼就可以使鼠標懸停在 p 標簽位置時，背景顏色變?yōu)榛疑?/p>
2娶聘、focus偽類
任何元素都可以運用focus偽類闻镶，但一般用于表單：
input：focus ｛background-color: yellow
表單中的文本框在用戶單擊它時會獲取焦點，同時為該文本框添加一個黃色背景丸升。 測試
3铆农、:target偽類
如果用戶點擊一個指向頁面中其他元素的鏈接，則那個元素就是目標（target）狡耻，可以用 :target 選中它墩剖。
<style> \#more_info:target {background:\#eee;}
</style> <a href="\#more_info">More Information</a> <h2 id="more_info">This is the information you are looking for.</h2>
用戶單擊鏈接跳轉id為more_info的元素時，為該元素添加淺灰色背景夷狰。 維基百科在其引證中就大量地使用了:target 偽類 岭皂。
結構化偽類
1、:first-child和:last-child
:first-child代表一組同胞元素中的第一個元素孵淘，而:last-child則代表最后一個蒲障。如下：
<style> ol.results li:first-child { color: blue; } ol.results li:last-child { color: red; }
</style> <ol class="results"> <li>MY FAST PONY</li> <li>STEADY TROTTER</li> <li>SLOW OL'NAG</li>
</ol>
2、nth-child(n)
n可以是表示一個數(shù)值（也可以使用odd或者even表示奇數(shù)和偶數(shù)瘫证，也可用2n+1或者2n來表示），例如：
li:nth-child(3) {color: grey;}
:nth-child偽類最常用于提高表格的可讀性庄撮，交替使用不同的顏色背捌。
還有 偽元素,內(nèi)容有點多，就不一一介紹了洞斯。
參考資料：《CSS設計指南》毡庆、[w3cschool] http://www.w3school.com.cn/ )
我的博客： http://liuxiaoyu.cc 歡迎騷擾~
摘自CSS選擇器詳解
