css大家都不陌生了，從1996年12月css1正式推出，經歷了1998年5月css2，再到2004年2月css2.1，最后一直到2010年推出的css3。css的推出給web帶來巨大
的改變，使我們的網頁樣式多變，豐富多彩。現在所使用的css基本上是在1998年推出的css2的基礎上發展而來的。
技術是發展的，2010年css3的推出，給我們帶來許多亮點，比如可以創建圓角邊框，可以在邊框上使用圖像等等。我也是被它這些新的樣式所吸引。自己也一邊
看一邊學習，只是有新樣式在部分瀏覽器是不支持的，但是也不妨礙我們對新的技術的追求。也隨着現代瀏覽器的標准化，這些css3的新樣式是遲早用的着，雖
然知識有點基礎，但是每個技術都是基礎牢固才會有更好的發展與突破，經常跟一些很牛逼的人聊天，他們都是工作一定的時候反過去看一些基礎理論性的東西
，所以不要輕視基礎，只有基礎扎實，你的技術大廈才能更高，廢話不多說，今天我就從css3的選擇器說起。
css3之屬性選擇器
css3之屬性選擇器，其中包括：
1.[att=val]
2.[att*=val]
3.[att^=val]
4.[att$=val]
下面我將用實例演示它們的用法
css代碼：
<style type="text/css"> p[id=p_name] {color:red;} p[id*=p] {border:1px solid #DDD;} p[id^=start] {font-weight:700} p[id$=end] {background:yellow} </style>
效果如圖1：
結構性偽類選擇器
1.偽類選擇器
在講偽類選擇器之前，我先說下類選擇器，類選擇器的使用如下所示：
<style type="text/css"> p.p_test {color:#F60;} </style>
偽類選擇器,大家看到這個術語不是很懂，樓主跟你們一樣，但是看到下面的示例，立馬知曉：
<style type="text/css"> a:link {color:#F00; text-decoration:none;} a:visited {color:#0F0; text-decoration:none;} a:hover {color:#F0F; text-decoration:underline;} a:active {color:#00F; text-decoration:none;} </style>
看到這大家頓時知道了吧，在css中我們最常用的偽類選擇器是使用在a元素上。那么偽類選擇器與類選擇器額區別是,類選擇器可以隨便起名字如“p.right”，
“p.left”；但是偽類選擇器是css中已經定義好的選擇器，不能隨便起名。
2.偽元素選擇器
偽元素選擇器是指並不是對真正的元素使用的選擇器，而是針對css中已經定義好的偽元素使用的選擇器。
在css中有下面四個偽元素選擇器：
2.1.first-line偽元素選擇器(它用於某個元素中的第一行文字使用樣式，只能與塊級元素關聯)
示例如下：
<html> <head> <style type="text/css"> p:first-line { color:#ff0000; font-variant:small-caps; } </style> </head> <body> <p> This is a text.<br/> That is a text. </p> </body> </html>
2.2.first-letter偽元素選擇器(向文本的第一個字母添加特殊樣式,在 CSS2.1 之前，:first-letter 只能與塊級元素關聯。CSS2.1 擴大了這個范圍，可以與任
何元素關聯)
示例如下:
<html> <head> <style type="text/css"> p:first-letter { color:#ff0000; font-size:xx-large; } </style> </head> <body> <p>This is a text.</p> </body> </html>
2.3.before偽元素選擇器(在元素之前添加內容)
這個偽元素允許創作人員在元素內容的最前面插入生成內容。默認地，這個偽元素是行內元素，不過可以使用屬性 display 改變這一點.
示例如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> li {list-style:none;} li:before {content:'■'} </style> </head> <body> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html>
2.4.after偽元素選擇器(在元素之后添加內容)
示例如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> li {list-style:none;} li:after {content:'--測試文字';color:red} </style> </head> <body> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html>
3. 4個基本結構性偽類選擇器
3.1.root選擇器（將樣式綁定到頁面的根元素中）
所謂根元素，是指位於文檔樹的最頂層結構的元素，在html頁面上就是指包含整個頁面的“html”部分.
示例如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> :root {background:yellow;} body {background:red;} </style> </head> <body> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html>
ps:在使用樣式指定root元素與body元素的背景時，根據情況不同的指定條件，背景色的顯示范圍會有所變化，如上面的代碼不使用root選擇器來指定root元素
的背景色，只指定body元素的背景色，則整個頁面就變成紅色的了。
3.2.not選擇器(想對某個結構使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式，就使用not選擇器)
示例如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> body *:not(p) {color:blue;} </style> </head> <body> <p>我是排除元素</p> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html>
3.3.empty選擇器(指定當元素的內容為空時使用樣式)
示例如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> table td {padding:10px;} table td:empty {background:#DDD} </style> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td></td> </tr> </table> </body> </html>
3.4.target選擇器(使用target選擇器來對頁面中的某個target元素[該元素的id被當作頁面的超鏈接類使用]指定樣式，該樣式只有在用戶點擊了頁面中的超鏈接
，並且跳轉到target元素后起作用)
示例如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> :target {background:yellow;} </style> </head> <body> <a href="#div1">連接一</a> <a href="#div2">連接一</a> <div class="test" id="div1">內容一</div> <div id="div2">內容二 </div> </body> </html>
4. 下面接着說其它幾個選擇器
first-child,last-child,nth-child,nth-last-child這幾個選擇器能夠針對一個父元素中的第一個，最后一個，指定序號的子元素，甚至第偶數個，第奇數
個子元素進行樣式指定。
4.1.first-child與last-child的運用，first-child在ie7開始被支持，其它現代瀏覽器都支持
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> .ul1 li:first-child {background:yellow;} .ul1 li:last-child {background:red;} </style> </head> <body> <ul class="ul1"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html>
4.2.nth-child(表示第幾個元素),運用如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> .ul1 li:nth-child(2) {background:yellow;} </style> </head> <body> <ul class="ul1"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html>
4.3.nth-last-child(表示倒數第幾個元素),運用如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> .ul1 li:nth-last-child(1) {background:yellow;} </style> </head> <body> <ul class="ul1"> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </body> </html>
ps:nth-child與nth-last-child的序號是從1開始，當然也可以是關鍵詞或公式。；除了對指定序號的子元素使用樣式以外，還可以對某個父元素中的所有第奇
數個子元素或第偶數個子元素使用樣式。
4.3.1 nth-child 對某個父元素中的所有第奇數個子元素的樣式設置
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> .ul1 li:nth-child(odd) {background:yellow;} </style> </head> <body> <ul class="ul1"> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> <li>項目5</li> <li>項目6</li> <li>項目7</li> </ul> </body> </html>
4.3.2 nth-last-child 對某個父元素中的所有倒數上去的第偶數個子元素的樣式設置
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> .ul1 li:nth-last-child(even) {background:yellow;} </style> </head> <body> <ul class="ul1"> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> <li>項目5</li> <li>項目6</li> <li>項目7</li> </ul> </body> </html>
4.4.nth-of-type(匹配屬於父元素的特定類型的第 N 個子元素的每個元素)
4.5.nth-last-of-type(配屬於父元素的特定類型的第 N 個子元素的每個元素，從最后一個子元素開始計數)
好，既然知道他們的用處，那我們直接看個列子：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> h2:nth-of-type(odd) {background:red;} h2:nth-last-of-type(even) {background:green;} </style> </head> <body> <h2>標題一</h2> <p>內容一</p> <h2>標題二</h2> <p>內容二</p> <h2>標題三</h2> <p>內容三</p> </body> </html>
5.only-child(匹配屬於其父元素的唯一子元素的每個元素)
其實“:nth-child(1):nth-last-child(1)”的結合用法
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> 選擇器 </title> <style type="text/css"> div p:only-child {background:red;} </style> </head> <body> <div> <p>孩子一</p> </div> <div> <p>孩子一</p> <p>孩子二</p> </div> <div> <p>孩子一</p> <p>孩子二</p> <p>孩子三</p> </div> </body> </html>
上面說了那么多的css選擇器的示例運用，有這些選擇器可以大幅度的提高開發書寫或修改樣式表是的工作效率，我其實一直期待使用這些css選擇器，可惜有IE
在幾乎在pc上是不能使用這些高級的選擇器，還好移動端的瀏覽器支持的不錯。好啦，這些也只是css3的一部分選擇器，下次我將會列出其余的部分，大家想知
道也可以下載css3手冊先一睹為快！