高級選擇器，是區別於常見選擇器的概念，是CSS的高級運用，也是作為擴展。總體來說，不使用高級選擇器一樣能做出十分優雅和絢麗的效果，但是使用高級選擇器具有更高的語義化程度，而且能使你的html文本更加干凈、簡潔，您甚至可以不在html內顯示引用類樣式，因為它已經被定義在后台。
注：以下信息均摘自網絡，本人不承諾嚴謹可靠，且本人並未完全親測，只是在火狐12.0及IE9中測試了，本人在本篇隨筆中多次說道IE9不支持效果可能是個人原因，希望讀者能夠自主去嘗試。
二、高級選擇器。
①屬性選擇器。屬性選擇器是指定：“當某個元素具有某個屬性時，它應該有的某些特征”這樣一種思想。這句話的“元素”是指標簽，即html元素，屬性一般是指它引用的某個（些）類樣式，當然，也可以是其它屬性。
1).元素有某個屬性時，而不關心屬性的值。
比如以下示例，只要標簽引用了類樣式，就必須有某些特質：
1 <html> 2 <head> 3 <title> 屬性選擇器示例 </title> 4 <style type="text/css"> 5 h1[class]{background-color:green} 6 .t1{background-color:blue} 7 .t2{background-color:silver} 8 </style> 9 </head> 10 <body> 11 <h1 class="t1">這是示例文字，請看背景顏色</h1> 12 <h1 class="t2">這是示例文字，請看背景顏色</h1> 13 </body> 14 </html>
2).元素引用某一個或多個類具體樣式。
示例1：
1 <html> 2 <head> 3 <title> 屬性選擇器示例 </title> 4 <style type="text/css"> 5 h1[class="t1 t2"]{background-color:yellow;} 6 h1[class="t1"]{background-color:red;} 7 .t1{background-color:blue} 8 .t2{background-color:silver} 9 </style> 10 </head> 11 <body> 12 <h1 class="t1">這是示例文字，請看背景顏色</h1> 13 <h1 class="t1 t2">這是示例文字，請看背景顏色</h1> 14 </body> 15 </html>
如果“屬性”為多個類樣式，則需要全部寫出來，並且一定要以相同順序。
以上寫法不被IE9瀏覽器支持，IE9以下……。
3).在元素某種屬性的多個值里有某一個特定的值。
比如如下示例，在h1引用的多個類樣式中有一個“t3”的類樣式：
1 <html> 2 <head> 3 <title> 屬性選擇器示例 </title> 4 <style type="text/css"> 5 h1[class ~= "t3"]{background-color:green} 6 .t1{background-color:blue} 7 .t2{background-color:silver} 8 </style> 9 </head> 10 <body> 11 <h1 class="t1 t3">這是示例文字，請看背景顏色</h1> 12 <h1 class="t2 t3">這是示例文字，請看背景顏色</h1> 13 <h1 class="t1 t2 t3">這是示例文字，請看背景顏色</h1> 14 </body> 15 </html>
不被IE9支持。
4).在元素某種屬性的值（單個）里有某一個特定的值是以特定字符或字符串開始的，如果不是單個值，則具特定的值必須出現在第一個位置。
如下示例：
1 <html> 2 <head> 3 <title> 屬性選擇器示例 </title> 4 <style type="text/css"> 5 h1[class ^= "t3"]{background-color:green} 6 .t1{background-color:blue} 7 .t2{background-color:silver} 8 </style> 9 </head> 10 <body> 11 <h1 class="t3t3">這是示例文字，請看背景顏色</h1> 12 <h1 class="t3t3">這是示例文字，請看背景顏色</h1> 13 <h1 class="t2 t3t3">這是示例文字，請看背景顏色</h1> 14 <h1 class="t3t3 t2">這是示例文字，請看背景顏色</h1> 15 </body> 16 </html>
不被IE9支持。
5).同上，在單個值中以某一些字符作為結尾，不同的是在火狐瀏覽器中並不要求單個值的匹配。
如下：
1 <html> 2 <head> 3 <title> 屬性選擇器示例 </title> 4 <style type="text/css"> 5 h1[class $= "t3"]{background-color:green} 6 .t1{background-color:blue} 7 .t2{background-color:silver} 8 </style> 9 </head> 10 <body> 11 <h1 class="t1 t3t3">這是示例文字，請看背景顏色</h1> 12 <h1 class="t2 t3t3">這是示例文字，請看背景顏色</h1> 13 <h1 class="t1 t2 t3t3">這是示例文字，請看背景顏色</h1> 14 <h1 class="t3t3">這是示例文字，請看背景顏色</h1> 15 <h1 class="t3">這是示例文字，請看背景顏色</h1> 16 </body> 17 </html>
不被IE9支持。
6).同4、5，此處要求匹配，在值的開始、中間、結尾都可以，在火狐瀏覽器中依然不要求在單個值中解釋，而IE9依然不支持……。
如下示例，我為了考慮盡可能多的情況寫的有一些凌亂：
1 <html> 2 <head> 3 <title> 屬性選擇器示例 </title> 4 <style type="text/css"> 5 h1[class *= "t3"]{background-color:green} 6 .t1{background-color:blue} 7 .t2{background-color:silver} 8 .t3{background-color:red} 9 .t3t3{background-color:red} 10 .t3t3t2{background-color:red} 11 .t3t2t3{background-color:red} 12 .t2t3t3{background-color:red} 13 </style> 14 </head> 15 <body> 16 <h1 class="t1 t3t3t2">這是示例文字，請看背景顏色</h1> 17 <h1 class="t2 t2t3t3">這是示例文字，請看背景顏色</h1> 18 <h1 class="t1 t2 t3t3">這是示例文字，請看背景顏色</h1> 19 <h1 class="t3t3">這是示例文字，請看背景顏色</h1> 20 <h1 class="t3">這是示例文字，請看背景顏色</h1> 21 <h1 class="t3t3t3">這是示例文字，請看背景顏色</h1> 22 <h1 class="t2t3t3t2">這是示例文字，請看背景顏色</h1> 23 <h1 class="t2 t3">這是示例文字，請看背景顏色</h1> 24 <h1 class="t3 t1">這是示例文字，請看背景顏色</h1> 25 <h1 class="t3 t1 t2">這是示例文字，請看背景顏色</h1> 26 <h1 class="t3t2t3">這是示例文字，請看背景顏色</h1> 27 </body> 28 </html>
7).元素的屬性的值為某一個特定字符或字符串加‘-’開始，如果不是單個值，則特定的值必須在第一個位置。
1 <html> 2 <head> 3 <title> 屬性選擇器示例 </title> 4 <style type="text/css"> 5 h1[class |= "t3"]{background-color:green} 6 .t1{background-color:blue} 7 .t2{background-color:silver} 8 .t3{background-color:red} 9 </style> 10 </head> 11 <body> 12 <h1 class="t3-1">這是示例文字，請看背景顏色</h1> 13 <h1 class="t3-2">這是示例文字，請看背景顏色</h1> 14 <h1 class="t3-4">這是示例文字，請看背景顏色</h1> 15 <h1 class="t3t3">這是示例文字，請看背景顏色</h1> 16 <h1 class="t1 t3-">這是示例文字，請看背景顏色</h1> 17 <h1 class="t3- t2">這是示例文字，請看背景顏色</h1> 18 <h1 class="t1 t3-1">這是示例文字，請看背景顏色</h1> 19 <h1 class="t3-1 t2">這是示例文字，請看背景顏色</h1> 20 <h1 class="t2 t3-1 t2">這是示例文字，請看背景顏色</h1> 21 </body> 22 </html>
這是比較重要的用法，當然：“屬性”和“值”應該是對應的，但不一定是引用類樣式與樣式名稱。
比如（摘自網絡）：
1 a[href$=”.doc”]{background: url(word.gif) no-repeat left 50%;} 2 3 a[href$=”.pdf”]{background: url(pdf.gif) no-repeat left 50%;} 4 5 a[href$=”.jpg”]{background: url(jpeg.gif) no-repeat left 50%;}
又如（摘自網絡）：
1 input[type="text"] { 2 width: 200px; 3 }
……
②子選擇器。自選擇器允許您定義具有父子關系元素的自元素的樣式。
如下（摘自網絡）：
1 <html> 2 <head> 3 <title> 子選擇器示例 </title> 4 <style type="text/css"> 5 p.t1 > strong{color:blue} 6 p > strong{color:silver} 7 p > em > strong{color:yellow} 8 p > em{color:red} 9 </style> 10 </head> 11 <body> 12 <p class="t1"><strong>this is right.</strong></p> 13 <p><strong>this is right.</strong></p> 14 <p><em>really<strong>this is wrong.</strong></em></p> 15 <p class="t1"><em>really<strong>this is wrong.</strong></em></p> 16 </body> 17 </html>
依然強調：屬性和值不一定是樣式和名稱。
1 body > div blockquote { 2 margin-left: 30px; 3 }
我懷疑我是不是操作失誤，因為IE9依然不支持……。
大家可以看出來：子選擇其和使用空格是一樣的效果，我還沒有看出來有什么不同，當然，我如果發現了會貼出來。他們都支持相同和不同屬性類型、相同和不同元素類型的父子關系，甚至支持元素和屬性之間的父子關系。
如下示例：
1 <html> 2 <head> 3 <title> 子屬性選擇器和空格效果示例 </title> 4 <style> 5 .t1 > li{color:red} 6 /*.t1 li{color:red}*/ 7 </style> 8 </head> 9 10 <body> 11 <ul class="t1"> 12 <li> 13 agnloagn 14 </li> 15 </ul> 16 </body> 17 </html>
那么一般是使用空格的，因為IE系列支持得很好。我看到過的網頁都很純粹，要么用>要么用空格。
③兄弟選擇器。顧名思義，兄弟選擇器是約定了兄弟元素之間的樣式，當然，是‘兄’約定‘弟’。
1).臨近兄弟選擇器。
1 <html> 2 <head> 3 <title> 兄弟選擇器示例 </title> 4 <style type="text/css"> 5 h1 + h2{color:red} 6 </style> 7 </head> 8 <body> 9 <h1>aa</h1> 10 <h2>aa</h2> 11 <h2>aa</h2> 12 <h1>aa</h1> 13 <h2>aa</h1> 14 </body> 15 </html>
1 <html> 2 <head> 3 <title> 兄弟選擇器示例 </title> 4 <style type="text/css"> 5 h1 + h1{color:red} 6 </style> 7 </head> 8 <body> 9 <h1>aa</h1> 10 <h1>aa</h2> 11 <h1>aa</h1> 12 </body> 13 </html>
臨近兄弟選擇器是一個‘兄’決定一個‘弟’，而且只決定他后面的第一個。IE9不支持。
2).普通兄弟選擇器。和臨近兄弟選擇器不同的是，他不要求是第一個，只要后面有。
1 <html> 2 <head> 3 <title> 兄弟選擇器示例 </title> 4 <style type="text/css"> 5 h1 ~ h2{color:red} 6 </style> 7 </head> 8 <body> 9 <h1>aa</h1> 10 <h2>aa</h2> 11 <h2>aa</h2> 12 <h3>aa</h3> 13 <h2>aa</h1> 14 </body> 15 </html>
IE9……。
本次的CSS應用就寫到這里。下次將會說到：偽類、偽元素、通用選擇器及選擇器優先級，內容會很多很復雜。
2012-05-15 21:27:09