神马文学网IE7的web标准之道——更丰富的CSS选择符
来源：百度文库 编辑：神马文学网 时间：2024/04/29 10:24:43
IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？
且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！
CSS选择符
IE7最令网页设计者兴奋的改进，便是支持更多、更丰富的CSS选择符（也有翻译为选择器的）了。这样通过CSS便能够，更进一步且方便的控制、定位前端结构元素，从而更丰富、多样的制定样式。
因为一直不喜欢套用书本上的那些很“专业”、“晦涩”、“拗口”的名词解释。所以我的博客文章中出现的名词解释都是一种熊样——俗、通俗（忒俗）！用非常直白甚至老土的话来解释这些名词，虽然看上去不专业，甚至有所偏差。但是能够让人一看就明白。因为我相信的一点是：让人看不明白的拽文，就是一陀文字堆成的屎！请原谅这句话的粗俗和无理，也请你原谅我下面这些名词解释的老土。
CSS选择符其实大家都见过，甚至都用过。看看下面的例子，就会自然明白了。
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
示例中的"#"和"."就是CSS选择符，正是因为有选择符，红色字体和蓝色字体这两种样式，才准确的定位到了id为“div1”和class为“div2”的两个div标签上。说白了，选择符其实就是CSS为样式找到前台结构元素目标的一种机制。
选择符有很多种，上面的示例中，利用“#”符号的称之为“ID选择符”，因为它是根据前台结构元素的id定位的。利用“.”符号的称之为“类选择符”，因为它是根据前台结构元素的class名定位的。其他的还有“通配选择符”、“类型选择符”、“包含选择符 ”……更详细的资料请查看这篇文章《CSS基础：CSS选择符 》
更多高级选择符
IE7与IE6相比，支持了更多的选择符，正是因为支持了这些丰富的选择符，所以使得IE7可以更方便的实现一些，以前在IE6很难实现或者无法实现的效果。下面就让我们看看这些令人兴奋的、IE7新支持的选择符。
相邻同胞选择符
利用“相邻选择符”，可以根据一个元素定位到与之相邻的另一个元素，并应用样式。说白了，“相邻选择符”就是只对“与自己平行关系的”、“相邻的”、“在我下面的”“哥们元素”起作用。下面的例子，将更有助于你的理解（注意只有处于h1后面的p3，字体颜色发生了变化）。
这里是我哥们甲的哥们，“我”和它不太熟。
这里是我哥们甲，它在我前面面，“混”的比我好，所以我就不管它了。
这里是“我”
这里是我哥们乙，它在我后面，“混”的还不如我，所以我要照顾它一下。
这里是我哥们乙的哥们，“我”和它不太熟。
下面是分别在IE6，IE7，FireFox（版本2.0.0，12）和Oepra（版本9.25）的显示效果截图（IE6和IE7共存的方法，可以参考文章《IE6和IE7共存方法（别人是别人的，我是我的）》）。
下面是关于“子选择符”和“后代选择符”的一些补充资料
很多朋友把分不清“子选择符”和“后代选择符”的区别。其实它们的差别还是蛮大的。“后代选择符”IE6，甚至更低IE版本，就已经支持了。也许你已经被这些“拗口”、“深奥”的名词搞迷糊了。到底什么“后代选择符”呢？其实大家都用过，看看下面的例子就明白了。现在无论是FireFox还是IE7，对于“子选择符”的支持还都存在一定的问题。
示例中，"p1"和"p2"包含在 “div1”内，那么"p1"和"p2"就是“div1”的儿子，是后代，而“p1_1”包含在“p1”中，那么“p1_1”是“p1”的儿子，是后代。而“p1_1”也包含在“div1”中，则“p1_1”是“div1”的孙子，也是后代。使用“#div1 p{color:red;}”（后代选择器）会将div1下面的所有段落的字体颜色都设置为了红色。无论是孩子还是孙子，都要听话。“只要是我的后代，就得听我的话！”——这就是“后代选择符”。
而“子选择符”则不会那么霸道，它只管它的“儿子”，不会去管“孙子”、“重孙子”、“重重孙子”……