CSS样式表:详细介绍IE7新支持的选择器(3)
作者:w3cpro.cn翻译 来源:蓝色理想 时间:2007-10-09 18:24:00
图2使用清楚的样式显示它们怎么展示,First DIV的结构有Paragraph One, Second DIV, and Paragraph Nine组成。Second DIV有三个以上段落和拥有三个以上段落的Third DIV。所有段落的颜色是白色,每个包含两个链接元素。所有DIV黑色边框轻度褐色。
图2
图2: DIVs are black-bordered and paragraphs are colored white for clarity.
这个结构可以进行许多选择符的试验。#p#分页标题#e#
试验
好了,让我们试着更改Second DIV的三四两个段落。如果我们只想使用后代选择符可以像这样div div p {color:red;};问题是上面的规则影响了Second DIV所有的段落,当然包括Third DIV的所有段落,因为Third div在DIV里面而段落在它里面。 还使用它?后代选择符没有一点选择性,让很多嵌套的元素都被选择当我们宁愿有给小的组选择。
的确,classes提供更好的选择性,但我们正试着避免class-itis。可是,不使用任何class仅使用相邻选择符比较困难。IE7 以前我们使用下面的方法:
div div p {color: red;}
div div div p {color: black;}
div div p.first {color: black;}
第一个规则应用了,然后带有另外DIV选择器的另外一个规则颠倒了Third DIV里的样式。随后阻止Paragraph Two的样式,我们没有选择,只有给段落指定一个class更换样式。真是痛苦!
通过子和兄选择符,我们可以很简单的实现,不需要class。
div>div>p+p {color: red;}
div>div>div p {color: black;}
图3
图3: Our new combinators have selected only Paragraphs Three and Four.
让我们来分析下上面的代码,第一个规则的意思是:选择div的子部div的子部段落的相邻兄弟段落。
Second DIV是第一DIV的子部,Second DIV里面的两个段落即符合直接跟随另外一个段落的要求是Paragraph Two 和 Paragraph Three。Paragraph one没有被选中,因为在Second DIV里面没有兄弟段落在它前面。