位置：首页>> 网络编程>> 网页设计>> CSS样式表：详细介绍IE7新支持的选择器（4）

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

作者：w3cpro.cn翻译　来源：蓝色理想　发布时间：2007-10-09 18:24:00　

标签：ie7,css,选择器

这太棒了，但是还有一个问题。Third DIV同样是一个DIV的子部，同样有三个相邻段落的子部。我们不想Paragraph Six 和 Paragraph Seven被选中，所有必须制定一个规则，第二句的意思就是：选择div的子部div的子部div的后代段落。

对于我们测试的html，只有Third DIV里的段落适合描述的情况，所以对于目标段落它们用黑色文本代替红色文本。简洁明了，是不是？使用强大的后代、子、兄选择符，大部分class可以从我们的页面去除。我们也不是说大家一定要用到这些选择符，但是我们确信它们比单独使用后代选择符能够给你带来更多的适用性。

更多试验

现在我们试着选择Paragraph Eight里的link O 。你将会怎么做？花一点时间想下再看下面介绍的方法。

我们的方法

我们的第一个方法就是把Second DIV当做对象，然后使用兄弟选择符链接四个段落选择第四个段落，然后显示第四个段落的链接，最后写上段落的链接颜色代码。

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

图4

图4: A very narrowly defined element selection without using classes.

你们知道上面错在哪里了吗？考虑下Third DIV，它的位置正好和这四个段落有关。那就对了，四个段落都是兄弟，但是Paragraph Eight不是Paragraph Four的直接相邻兄弟。Third DIV在它们之间必须作为兄弟考虑进去。我可以仅仅在第三和第四个"P"选择器之间粘贴一个DIV选择器，但是这里有另外一个简单方法实现我们的目的。

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

上面的第一条语法指向Third DIV，然后选择它的直系兄弟段落(Paragraph Eight),最后选择段落里面的链接。“a”选择了段落里面所有的链接。接着第二条语句让跟随链接后面的所有链接为蓝色。所以link P的红色链接变成了蓝色，留下link O保持红色。好了我知道蓝色的链接是默认颜色，但我们学到了方法。

第一页上一页 1 2 3

5 下一页

投稿

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

猜你喜欢