一、元素選擇器 HTML文檔元素就是最基本的選擇器 如： 示例將<p>元素的字體顏色設置為了藍色，元素選擇器將作用於文檔內所有的<p>元素。同樣，我們也能夠同時為多個元素應用一種樣式，如： 為多個元素應用樣式時，用逗號分隔。 *作為通配選擇器，可以與任何元素匹配。 格式：元素|通配符 二、類選擇器 ...
一、元素選擇器
HTML文檔元素就是最基本的選擇器
如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p {color:blue;} </style> </head> <body> <p>這一段話是藍色的。</p> </body> </html>
示例將<p>元素的字體顏色設置為了藍色，元素選擇器將作用於文檔內所有的<p>元素。同樣，我們也能夠同時為多個元素應用一種樣式，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> h1,p {color:blue;} </style> </head> <body> <h1>標題顏色</h1> <p>這一段話是藍色的。</p> </body> </html>
為多個元素應用樣式時，用逗號分隔。
*作為通配選擇器，可以與任何元素匹配。
格式：元素|通配符
二、類選擇器
類選擇器的樣式與元素關聯，需要為class屬性指定一個適當的值，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> .one {color:blue;} </style> </head> <body> <p class="one">第一段。</p> <p>第二段</p> <p class="one">第三段</p> </body> </html>
格式：.類名
代碼中有3個<p>元素，其中有兩個指定了class屬性，即class="one"，在<style>中使用.one類選擇器指向這兩個<p>元素。與元素選擇器不同的是類選擇器以[.]開頭後面跟上指定的class屬性值。類選擇器可以對多個且不同元素指定同樣的class值。
三、多類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> .one {color:blue;} .two {color:red;} .one.two {color:green;} </style> </head> <body> <p class="one two">第一段。</p> <p class="two">第二段</p> <p class="one">第三段</p> </body> </html>
效果：
格式：.類名1.類名2……
多類的概念在於可以對class指定多個屬性值，如我們為<p>指定了class="one two"，那麼這個<p>元素的class屬性就包含了兩個屬性值"one"和"two"，中間空格作為分隔符。在樣式表中則使用[.屬性值1.屬性值2|……]來指向元素。上面的代碼中，我們對class值為"one"的元素顏色應用藍色，class值含有"two"的元素應用紅色，為class值同時含有"one"和"two"的元素顏色應用為綠色。如果在樣式表中沒有為指定.one.two{color:green;}，那麼<p class="one two">第一段。</p>呈現出來的效果是什麼呢？答案是紅色。因為.one和.two都會指向滿足條件的<p class="one two">第一段。</p>，這時候樣式就會依照層疊來應用樣式了。
四、ID選擇器
同類選擇器類似，但匹配的是id屬性，而不是類選擇器的class屬性。與類選擇器不同的是，在一個HTML文檔中，ID選擇器會使用一次，而且僅一次，雖然在很多瀏覽器中指定id屬性值能夠出現多次，但這是不正確的，而且如果在JavaScript中使用getElementById()方法時，會造成不必要的錯誤。通過#元素ID屬性值來指向元素。如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> #p1 {color:blue;} </style> </head> <body> <p id="p1">第一段。</p> <p>第二段</p> <p>第三段</p> </body> </html>
格式：#ID屬性值
五、屬性選擇器
註意：Safari、Opera和所有基於Gecko的瀏覽器都支持屬性選擇器，在IE5/Mac和IE6/Win之前，IE並不支持屬性選擇器。
1.簡單屬性選擇器
使用情況：如果希望有某個屬性的元素，不在乎屬性的值是什麼。可以使用簡單屬性選擇器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p[class] {color:blue;} </style> </head> <body> <p class="one">第一段。</p> <p class="two">第二段</p> <p>第三段</p> </body> </html>
效果：
格式：元素|通配符[屬性]
可以看到含有class屬性的<p>元素的顏色變成了藍色，並且對class的值並不關註。
還可以根據多個屬性進行選擇，如：a[href][title]{font-weight:bold;} //對同時具有href屬性和title屬性的<a>元素變成粗體。
2.根據具體屬性值選擇
上面的例子是不關註屬性值的選擇器，那麼現在我們要講的就是需要關註屬性值的選擇器了。我們將上面的例子改變一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p[class="one"] {color:blue;} </style> </head> <body> <h1 class="one">123</h1> <p class="one">第一段。</p> <p class="two">第二段</p> <p>第三段</p> </body> </html>
效果：
格式：元素|通配符[屬性=屬性值]
我們可以看到p[class="one"]等同於p.one，但是使用屬性選擇器可以針對其它屬性值來選擇元素，而不單單是達到類選擇器的效果。
3.根據部分屬性值選擇
如果屬性能接受詞列表(詞之間用空格分隔)，可以根據其中任意一個詞進行選擇，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> h1[class~="box"]{color:blue;} </style> </head> <body> <h1 class="one two box">123</h1> </body> </html>
效果：
格式：元素|通配符[屬性~=屬性部分值]
更高級的css選擇器（CSS2）:
[foo^="bar"] 選擇foo屬性值以"bar"開頭的所有元素
[foo$="bar"] 選擇foo屬性值以"bar"結尾的所有元素
[foo*="bar"] 選擇foo屬性值中包含字串"bar"的所有元素
4.特定屬性選擇類型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p[lang|="en"]{color:blue;} </style> </head> <body> <p lang="en">段落1</p> <p lang="en-a">段落2</p> <p lang="en-b">段落3</p> <p lang="cn-en">段落3</p> <p lang="encn">段落4</p> </body> </html>
這個規則會匹配lang屬性等於en或者以en-開頭的所有元素，encn也不會起作用，因為不是en-開頭，效果：
格式：元素|通配符[屬性|="屬性值"
六、後代選擇器
h1 em{color:blue;}
可以看作對作為h1後代元素的em元素顏色改為藍色，用代碼展示就是：
<h1><em>123</em></h1>
需要註意的是,這裡是後代元素，而不只是子元素，如下麵的代碼也是有效的：
<h1><b><em>123</em></b></h1>
如果只想縮小範圍，選擇子元素而不是後代元素，則可以使用下麵的方式：
h1 > em{color:blue;}
選擇相鄰兄弟元素，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> h1+p{color:blue;} </style> </head> <body> <p>段落1</p> <h1>段落2</h1> <p>段落3</p> <p>段落3</p> <p>段落4</p> </body> </html>
效果：
通過h1+p匹配了之前的兄弟元素是<h1>的所有符合要求的<p>元素，如果<p>元素之前元素隔著其它元素，則不符合匹配要求，但中間只隔著文本內容並不會影響匹配。
接下來我們要講的就是更有意思偽類和偽元素了。
偽類
1.鏈接偽類
：link 指示作為超鏈接（即有一個href屬性）並指向一個未訪問地址的所有錨。有些鏈接會不正確的解釋
：visited 指示作為已訪問地址超鏈接的所有錨
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> a:link {color:blue;} a:visited{color:red;} </style> </head> <body> <a href="#1">被點擊過了了</a> <a href="#2">未被點擊</a> </body> </html>
結果：
鏈接偽類也適用於ID選擇器,如：
a#one:link{color:yellow;}
2.動態偽類
:focus 當前擁有輸入焦點的元素
:hover 指示滑鼠停留元素
:active 指示被用戶輸入激活的元素
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> input:focus{background-color:black;} a:hover {background-color:yellow;} a:active{background-color:red;} </style> </head> <body> <input type="text"> <a href="#6">例子</a> </body> </html>
無操作效果：
文本框獲得焦點效果：
滑鼠在文字上停留效果：
滑鼠在文字上按下左鍵時效果：
偽元素
1.設置首字母樣式
如將<p>元素中第一個字母變成紅色:
p:first-letter{color:red;}
效果：
2.設置第一行的樣式
如：
p:first-line{color:red;}
效果：
3.設置之前和之後元素的樣式
如：
h2:before{content:"<<";color:blue;}
h2:after{content:">>";color:red;}
效果：
