高级选择器，是区别于常见选择器的概念，是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