CSS2的一些高级选择器

CSS 2有些高级的特性，但目前IE6及更低的版本都是不支持的，郁闷之中... 有幸的是， Firefox和Safari等现代浏览器支持这些高级选择器。没关系，学到手了自然也有用。IE会不断 的完善其对标准的支持，在不久的将来定有机会派上用场，只是如果你现在就用这些高级的特性 ，那么切记一则：在对于站点功能很重要的任何元素上应该避免使用这些高级选择器。

利用这些属性可以明显的减少结构层的嵌套及类选择的代码，从而使得我们的文档更轻巧， 更具可用性。嘿嘿，下面我们开始看具体用法及代码示例吧！

1. 子选择器和相邻同胞选择器

这些高级选择器中的第一个是子选择器。后代选择器选择一个元素的所有后代，而子选择器 只选择元素的直接后代，即子元素。在下面的示例中，外层列表中的列表项显示一个定制的图标 ，而嵌套列表中的列表项不受影响：

#nav > li {background:url(folder.png)no-repeat left left top;}

<ul id="nav">
<li>Home</li>
<li>Services</li>
</ul>
<ul>
<li>Design</li>
<li>Developent</li>
<li>Consultancy</li>
<li>Contact Us<li>
</ul>

在IE 6和更低版本中，可以使用通用选择器模拟子选择器的效果。为此，先在所有后代上应 用你希望子元素具有的样式。然后，使用通用选择器覆盖子元素的后代上的样式。所以，要实现 与前面的子选择器示例相同的效果，可以这样做：

#nav li * {background:url(folder.png)no-repeat left left top;}
#nav li * {background:none;}

还可能希望根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定 位同一个父元素下某个元素之后的元素。可以使用相邻同胞选择器让顶级标题后面的第一个段落 以粗体显示，同时不影响其他段落：

h1 + p {font-weight:bold;}

<h1>Main Heading</h1>
<p>第一个段落（能应用上粗体文字）</p>
<p>第二个段落</p>
<p>第三个段落</p>

2. 属性选择器

顾名思义，属性选择器可以根据某个属性是否存在或属性的值来寻找元素。因此能够实现某 些非常有意思和强大的效果。例如，当鼠标停留在具有title属性的元素上时，大多数浏览器会 显示一个工具提示。可以使用这种特性解释某些内容（比如缩写词）的含义：

<abbr title="高级css样式的应用">CSS</abbr>

但是，如果不把鼠标停留在这个元素上，那么没有任何迹象能够表明存在这一额外信息。为 了解决这个问题，可以使用属性选择器对具有title属性的abbr元素应用与其他元素不同的样式 ——在下面的示例中，在它们下面加上点。还可以在鼠标停留在这个元素上时将鼠标指针改为问 号，表示这个元素与众不同，从而提供更多的上下文相关信息。

abbr[title] {border-bottom:1px solid #ccc;}
abbr[title]:hover {cursor:help;}

除了根据某个属性是否存在对元素应用样式之外，还可以根据属性值应用样式。例如，使用 rel属性值nofollow链接的站点无法从Google获得评级收益（ranking benefit）。以下规则在这 种链接旁边显示一个图像，以此表示不推荐这个目标站点：

a[rel="nofollow"] {background-image:url(nofollow.gif);padding-right:20px;}

由于IE 6和更低版本不支持属性选择器，有一种更聪明的使用属性选择器的方法。可以对IE 应用一种样式，对更符合标准的浏览器应用另一种样式。例如，IE在显示1像素的点边界方面有 问题，所以可以将点边界显示为虚线。可以使用属性选择器将点边界只应用于能够正确地表现它 的浏览器。这需要寻找class属性而不是使用类选择器。

.intro {border-style:solid;}
[class="intro"] {border-style:dotted;}

一些属性可以有多个值，值之间用空格分隔。属性选择器允许根据属性值之一寻找元素。例 如，一些开发人员建议在链接的属性中使用预定义的关键字来定义站点拥有者与其他人的关系。 可以利用这一信息将一个图像应用于在rel属性中包含关键字friend的任何链接。

a[rel~="friend"] {background-image:url(friend.gif);}

<a href="#" rel="friend met colleague">朋友</a>

使用具有friend值的rel属性称为XHTML Friends Network（简称为XFN），这是最近开发的几种新的“微格式”之一。可以在http://gmpg.org/xfn/了解关于XFN的更多信息，可以在http://microformats.org了解微格式的概念。

一旦这些高级的CSS 2选择器得到广泛的支持，在代码中添加额外的div或类的需求就会大大 减少。