CSS选择器(中)——高级选择器

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

posted @ 2012-05-15 21:28  云中双月  阅读(3921)  评论(0编辑  收藏  举报