高级选择器，是区别于常见选择器的概念，是CSS的高级运用，也是作为扩展。总体来说，不使用高级选择器一样能做出十分优雅和绚丽的效果，但是使用高级选择器具有更高的语义化程度，而且能使你的html文本更加干净、简洁，您甚至可以不在html内显示引用类样式，因为它已经被定义在后台。

　　注：以下信息均摘自网络，本人不承诺严谨可靠，且本人并未完全亲测，只是在火狐12.0及IE9中测试了，本人在本篇随笔中多次说道IE9不支持效果可能是个人原因，希望读者能够自主去尝试。

 

　　二、高级选择器。

　　①属性选择器。属性选择器是指定：“当某个元素具有某个属性时，它应该有的某些特征”这样一种思想。这句话的“元素”是指标签，即html元素，属性一般是指它引用的某个（些）类样式，当然，也可以是其它属性。

　　1).元素有某个属性时，而不关心属性的值。

　　比如以下示例，只要标签引用了类样式，就必须有某些特质：

1  2   3    4    9  10  11   
这是示例文字，请看背景颜色
12   
这是示例文字，请看背景颜色
13  14 

　　2).元素引用某一个或多个类具体样式。

　　示例1：

1  2   3    4   10  11  12   
这是示例文字，请看背景颜色
13   
这是示例文字，请看背景颜色
14  15 

　　如果“属性”为多个类样式，则需要全部写出来，并且一定要以相同顺序。

　　以上写法不被IE9浏览器支持，IE9以下……。

　　3).在元素某种属性的多个值里有某一个特定的值。

　　比如如下示例，在h1引用的多个类样式中有一个“t3”的类样式：

1  2   3    4    9  10  11   
这是示例文字，请看背景颜色
12   
这是示例文字，请看背景颜色
13   
这是示例文字，请看背景颜色
14  15 

　　不被IE9支持。

　　4).在元素某种属性的值（单个）里有某一个特定的值是以特定字符或字符串开始的，如果不是单个值，则具特定的值必须出现在第一个位置。

　　如下示例：

1  2   3    4    9  10  11    
这是示例文字，请看背景颜色
12    
这是示例文字，请看背景颜色
13    
这是示例文字，请看背景颜色
14    
这是示例文字，请看背景颜色
15  16 

　　不被IE9支持。

　　5).同上，在单个值中以某一些字符作为结尾，不同的是在火狐浏览器中并不要求单个值的匹配。

　　如下：

1  2   3    4    9  10  11   
这是示例文字，请看背景颜色
12   
这是示例文字，请看背景颜色
13   
这是示例文字，请看背景颜色
14   
这是示例文字，请看背景颜色
15   
这是示例文字，请看背景颜色
16  17 

　　不被IE9支持。

　　6).同4、5，此处要求匹配，在值的开始、中间、结尾都可以，在火狐浏览器中依然不要求在单个值中解释，而IE9依然不支持……。

　　如下示例，我为了考虑尽可能多的情况写的有一些凌乱：

1  2   3    4   14  15  16   
这是示例文字，请看背景颜色
17   
这是示例文字，请看背景颜色
18   
这是示例文字，请看背景颜色
19   
这是示例文字，请看背景颜色
20   
这是示例文字，请看背景颜色
21   
这是示例文字，请看背景颜色
22   
这是示例文字，请看背景颜色
23   
这是示例文字，请看背景颜色
24   
这是示例文字，请看背景颜色
25   
这是示例文字，请看背景颜色
26   
这是示例文字，请看背景颜色
27  28 

　　7).元素的属性的值为某一个特定字符或字符串加‘-’开始，如果不是单个值，则特定的值必须在第一个位置。

1  2   3    4   10  11  12   
这是示例文字，请看背景颜色
13   
这是示例文字，请看背景颜色
14   
这是示例文字，请看背景颜色
15   
这是示例文字，请看背景颜色
16   
这是示例文字，请看背景颜色
17   
这是示例文字，请看背景颜色
18   
这是示例文字，请看背景颜色
19   
这是示例文字，请看背景颜色
20   
这是示例文字，请看背景颜色
21  22 

　　这是比较重要的用法，当然：“属性”和“值”应该是对应的，但不一定是引用类样式与样式名称。

　　比如（摘自网络）：

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  2   3    4   10  11  12     
this is right.
13     
this is right.
14     
reallythis is wrong.
15     
reallythis is wrong.
16  17 

　　依然强调：属性和值不一定是样式和名称。

1 body > div blockquote {2     margin-left: 30px;3     }

 　　我怀疑我是不是操作失误，因为IE9依然不支持……。

　　大家可以看出来：子选择其和使用空格是一样的效果，我还没有看出来有什么不同，当然，我如果发现了会贴出来。他们都支持相同和不同属性类型、相同和不同元素类型的父子关系，甚至支持元素和属性之间的父子关系。

　　如下示例：

1  2   3    4    8   9 10  11   
     
      12     
      
13     agnloagn14     
15   
     
16  17 

　　那么一般是使用空格的，因为IE系列支持得很好。我看到过的网页都很纯粹，要么用>要么用空格。

　　③兄弟选择器。顾名思义，兄弟选择器是约定了兄弟元素之间的样式，当然，是‘兄’约定‘弟’。

　　1).临近兄弟选择器。

1  2   3    4    7   8   9     
aa
10     
aa
11     
aa
12     
aa
13     
aa
14  15 

 

1  2   3    4    7   8   9     
aa
10     
aa
11     
aa
12  13 

　　临近兄弟选择器是一个‘兄’决定一个‘弟’，而且只决定他后面的第一个。IE9不支持。

　　2).普通兄弟选择器。和临近兄弟选择器不同的是，他不要求是第一个，只要后面有。

1  2   3    4    7   8   9     
aa
10     
aa
11     
aa
12     
aa
13     
aa
14  15 

　　IE9……。

　　

　　本次的CSS应用就写到这里。下次将会说到：伪类、伪元素、通用选择器及选择器优先级，内容会很多很复杂。

　　2012-05-15 21:27:09