目錄
類型選擇器
通過類型選擇器可以選擇某一類型的html標簽，並對其使用樣式。
語法：
selector {property1: value; property2:value; ...}
示例：
<html> <head> <style type="text/css"> h1 { color:Red; font-size:30px;} </style> </head> <body> <h1>這是一個h1標簽</h1> </body> </html>
效果圖：
h1 { color:Red; font-size:30px; }
這行代碼選擇了h1標簽，並將h1元素的顏色改為紅色，字體大小改為20px. 類型選擇器也可以使用嵌套的形式來選擇類型，這種方式也被稱為后代選擇器
示例：
<html> <head> <style type="text/css"> h1 { color:Red; font-size:30px;} div h1{ color:Blue; font-size:20px;} </style> </head> <body> <h1>這是一個h1標簽</h1> <div> <h1>這是一個包含在div內的h1標簽</h1> </div> </body> </html>
效果圖：
div h1{ color:Blue; font-size:20px;}
這行代碼只選擇了所有div元素內部的h1元素，並將顏色改為紅色，字體大小改為16px，div元素外部的所有h1都不會受到影響。
類選擇器
通過類選擇器可以選擇class相同的html標簽，並對其使用樣式。
語法：
.selector { property1: value; property2: value; ...}
示例：
<html> <head> <style type="text/css"> .error-message { color:Red; line-height:2px;} </style> </head> <body> <h3 class="error-message">Error Message:</h1> <p class="error-message">description</p> </body> </html>
效果圖：
.error-message { color:Red; line-height:2px;}
這行代碼選擇了所有類為error-message的元素，並將其顏色改為紅色，行間距改為2px.
ID選擇器
ID選擇器可以選擇ID為某值的特定元素，並對其使用樣式。
語法：
#selector { property1: value; property2:value; ...}
示例：
<html> <head> <style type="text/css"> #title { color:Gray;} </style> </head> <body> <h1 id="title">Title</h1> </body> </html>
效果圖：
#title { color:Gray;}
這行代碼選擇id為title的元素，並將其顏色改為Gray.
Tips:
有時頁面會出現很多包含類或ID的元素，而它們之間的差異僅僅是出現在頁面中的位置不同，不要給這些元素指定不同的類或ID，應將一個類或ID賦給它們的父元素，然后使用后代選擇器定位它們。偽類
有時我們需要根據文檔結構之外的其它條件對元素應用樣式，偽類用於向某些選擇器添加特殊效果。
語法：
selector : pseudo-class {property1: value； property2:value;}
示例1：
<html> <head> <style type="text/css"> a:link{color: Red;} a:hover{color: Green;} a:visited{color: Blue;} </style> </head> <body> <a href="http://www.cnblogs.com/fattydoit/" target="_blank">小胖搞IT</a> </body> </html>
效果圖：
未訪問鏈接時：
鼠標懸停在鏈接上時：
訪問過鏈接：
a:link{color: Red;} a:hover{color: Green;} a:visited{color: Blue;}
第一行代碼將未訪問的標簽顏色設置為紅色，第二行代碼將鼠標懸停在標簽上時標簽的顏色設置為綠色，第三行代碼將訪問過的標簽設置為藍色。
示例2：
<html> <head> <style type="text/css"> p:first-child{color: Red;} </style> </head> <body> <p>第一段</p> <p>第二段</p> <p>第三段</p> <div> <p>第一段</p> <p>第二段</p> </div> </body> </html>
效果圖：
p:first-child{color: Red;}
這行代碼將任意元素的第一個子元素p設置為紅色。
偽元素
偽元素也是用來向某些選擇器添加特殊效果的，很容易和偽類混淆，簡單地說，偽類是用來匹配頁面上真是存在的元素，如:link用來匹配a元素，而偽元素用來匹配邏輯上存在，但在頁面上並不存在的元素。
語法：
selector :: pseudo-element {property1: value； property2:value;}
示例：
<html> <head> <style type="text/css"> p::first-letter{color: Red;} #p-with-logo::before{content:url(star.png);} </style> </head> <body> <p>這個段落首字符為紅色</p> <p id="p-with-logo">這個段落有Logo</p> </body> </html>
效果圖：
p::first-letter{color: Red;} #p-with-logo::before{content:url(star.png);}
第一行代碼找到p元素的第一個字符，並將其設置為紅色，第二行代碼找到id為p-with-logo的p元素，在它前面放一個logo.
參考資料：
常用選擇器介紹到此結束，下一回來介紹通用選擇器和高級選擇器...