CSS样式表：详细介绍IE7新支持的选择器（5）

让我们最后阐明下窍门

考虑到一个元素包含很长的链接元素和其他（我们的例子没有提到）。如果你写个a{color:red;}，所有的链接都是红色。现在写 a+a {color:red;}，这个结构选择了另外一个直系跟随的链接。在我们的链接元素里每个链接都符合这样的描述，除了第一个链接。不要陷入到认为这个想法将选择互动链接。所有规则的意思是寻找和选择拥有直系并且在它前方有链接的任何链接。明显的除了第一个链接每个链接都是一致符合要求的。

第一个链接不跟随任何级数的链接，所以a+a{color:red;}没有被选择。知道这个事实，想象下在这个结构里我们添加另外兄弟选择符和“a”选择器每次会发现什么情况。a+a+a{color:red;}排除最初的两个链接，a+a+a+a{color:red}排除最初三个链接，等等。

所以如果你曾经看过，或你自己使用这个选择器窍门，仅仅只要记住这个基本规则：参加的兄弟选择器数目等于序列里第一个被选择的元素的位置。如果这里有8个"a"选择器通过七个兄弟选择符联合，第八个链接和级数里剩余的所有链接将被选择。因而，你可能把相同类型的一系列元素划分为两组，或是为后面的一组使用新样式或是为全组更换样式，然后再为后面的一组更换样式，你自己选择。

浏览器问题

IE7非常不幸的认为HTML注释也是真实的DOM元素，所以如果你在错误的地方使用注释，IE7将会把它当作兄弟计算在内，而你设定的选择器将不会工作。使用兄弟选择符时只要了解这个问题注意让注释出现在不会惹麻烦的地方。

另外一个知道的兄弟选择符问题，除了opera 9外的所有浏览器，当额外元素是经script增加的，它们不会解释基于样式表的兄弟选择符。所以如果你用script在元素中建立一个新的段落，只有Opera 9才会认识到从而改变样式。其他当前浏览器只会忽略动态结构，在新的元素添加进来前保持原来样式。

额外介绍下:first-child伪类

IE7新支持:first-child伪类。这个选择器的语法和用法和 :hover伪类相似，:first-child选择元素里出现的第一个子部，用法像:hover一样，比如链接会是a:first-child。
我们认识到使用:first-child比仅使用兄弟选择符来的简单。但在怎样获得赞扬或是用:first-child伪类选择器替换它之前，我们希望大家同样认识到兄弟选择符是怎么独立运用的。

　　比较下面的代码，使用:first-child简单许多。

使用 :first-child之前

div>div>div+p a {color: red;}
div>div>div+p a+a {color: blue;}

使用 :first-child...

div>div>div+p a:first-child {color: red;}

:first-child确实让工作简单许多！不需要另外规则改变样式，只要记住当使用:first-child，它只作用于第一个子部first child。没有其他兄弟元素被选择，所以我们还需要兄弟选择符的才干。

我们可不可以使用兄弟和子选择符联合:first-child？当然可以，子选择符看起来没有问题。可是，兄弟选择符不能直接跟在:first-child前面，因为很明显第一个子部不可能有上面的兄弟

IE的问题

IE7似乎有一个问题，当兄弟选择符比:first-child在选择器中来的晚，IE7顺从兄弟选择符。这个情况也在其他浏览器有，但IE7显然不能处理相关的复杂性。这看来不够完美，不过至少IE7支持简单适度的联合结构，或许现在就可。

所以脑袋里记住，作为兄弟选择符，IE7将会考虑第一个链接前面的html注释为元素节点，而且IE7会选择注释代替，甚至你使用a:first-child都没用。IE7不关心:first-child伪类前面的"a"，它仍然坚持选择注释（注释和第一个链接在同一个容器而且在链接前面）。所以当你使用注释和高级CSS选择器要清楚了解真相。

结论

我们希望这篇文章没有给你们带来困惑，当支持更多选择符时了解更多可以用到的可能性样式。这在IE7大规模推广前还没有用处，现在你可以做好准备，至少关注已经支持的选择符。

作者：John Gallant , Holly Bergevin 翻译：w3cpro.cn
　　原文地址：http://www.communitymx.com/content/article.cfm?cid=1C603
　　翻译地址：http://www.w3cpro.cn/article/xhtmlcss/124.html