当前位置:首页 » 网站技术 » HTML & CSS

CSS样式表:详细介绍IE7新支持的选择器(2)

...

使用选择符

我们从简单但充分复杂的html结构开始:

<div>First DIV

<p>Paragraph One -

<a href="#">link A</a>

<a href="#">link B</a>

</p>

<div>Second DIV

<p>Paragraph Two -

<a href="#">link C</a>

<a href="#">link D</a>

</p>

<p>Paragraph Three -

<a href="#">link E</a>

<a href="#">link F</a>

</p>

<p>Paragraph Four -

<a href="#">link G</a>

<a href="#">link H</a>

</p>

<div>Third DIV

<p>Paragraph Five -

<a href="#">link I</a>

<a href="#">link J</a>

</p>

<p>Paragraph Six -

<a href="#">link K</a>

<a href="#">link L</a>

</p>

<p>Paragraph Seven -

<a href="#">link M</a>

<a href="#">link N</a>

</p>

</div>

<p>Paragraph Eight -

<a href="#">link O</a>

<a href="#">link P</a>

</p>

</div>

<p>Paragraph Nine -

<a href="#">link Q</a>

<a href="#">link R</a>

</P>

</div>

图1 是html结构的文本对象模型树,图揭示了元素之间真实结构的联系。

在图1里兄弟元素分布在较低的支线上,它们的源头分布在图表从左到右顺序上。每组兄弟元素是它们所在支线会合顶点单一元素的子元素。如Paragraph One, Second DIV, and Paragraph Nine都是兄弟,而且都是First DIV的子元素。

图2使用清楚的样式显示它们怎么展示,First DIV的结构有Paragraph One, Second DIV, and Paragraph Nine组成。Second DIV有三个以上段落和拥有三个以上段落的Third DIV。所有段落的颜色是白色,每个包含两个链接元素。所有DIV黑色边框轻度褐色。

Image 2: DIVs are black-bordered and paragraphs are colored white for clarity.

这个结构可以进行许多选择符的试验。#p#分页标题#e#

继续阅读
CSS快速入门
CSS缩写给你的网站加速
CSS 在 IE 和 Nascape 的显示差别
利用 CSS 改善网站可访问性
采用XHTML和CSS设计可重用可换肤网页
CSS改进网站设计的三个技巧
实用的CSS常见的问题和技巧总结
CSS清除浮动的最优方法
灵活运用CSS有必要扔掉IE吗?
发表评论

昵称:
最新评论
暂时没有评论!