网页设计中的计数器和作用域

至此，我们已经了解了如何在网站建设时把多个计数器串在一起创建一种多级计数。创作人员通常还需要对嵌套有序列表这么处理，不过为了达到很深的嵌套层次，需要创建足够多的计数器，这种做法很快会变得相当笨拙。仅仅是建立5层嵌套列表就需要一大堆的规则，如下：

ol ol ol ol ol li:before {counter-increment: ordl ord2 ord3 ord4 ord5;content: counter(ordl)""" counter(ord2)"." counter(ord3) counter(ord4) counter(ord5)".";}

想想看，要建立50层嵌套需要写多少规则！（这并不是说你应当建立50层的嵌套有序列表，即不表示这是合理的，而只是暂且举个例子。）

好在CSS2.x描述了计数器的作用域（scope）概念。简单地说，每层嵌套都会为给定计数器创建一个新的作用域。正是因为有作用域，以下规则才能以常规HTML方式实现嵌套表计数：

ol {counter-reset: ordered;}

ol li:before {counter-increment: ordered; content: counter(ordered)".";}

这些规则会使有序列表（甚至嵌套在其他列表中的有序列表）从1开始计数，并且逐项增1，这正是HTML—直以来的做法。

之所以能做到这一点，是因为毎层嵌套都为计数器ordered创建了一个新实例。所以，在网页设计时，对于第一个有序列表，会创建ordered的一个实例。然后，对于嵌套在第一个列表中的各个列表，又会创建另一个新实例，因此对于每个列表计数总是从头开始。

不过，如果你希望有序列表这样计数，使毎层嵌套都创建一个新计数器追加到老计数器上，如：1、1.1、1.2, 1.2.1. 1.2.2、1.3. 2、2.1 等。利用counter()是办不到的，不过可以用counters ()实现。这里的区别就在于一个“s”（counters ()而不是counter()）。

基本说来，关键字counters (ordered，会显示各作用域的ordered计数器，并追加一个点号，然后把对应一个给定元素的所有作用域计数器串起来。因此，一个3层嵌套列表中的列表项就会有这样的前缀：最外层列表作用域的ordered值、中间层列表作用域的ordered值（中间层列表是最外层列表和当前列表之间的列表），以及当前列表作用域的ordered值，各个ordered值后面都有一个点号。content值的余下部分（"-"）会在所有这些计数器后面增加一个空格、一个连字号以及另一个空格。

与counter()类似，可以为嵌套计数器定义一个列表样式，不过所有计数器都应用同样的样式。

小结

尽管列表样式没有我们希望得那么复杂，而且浏览器对生成内容的支持还有些欠缺（至少在写作本书的时候是这样），不过能够对列表应用样式还是很有用的。一个常见的用途是取一个链接列表，去除其标志和缩进来创建一个导航边栏。一方面要保证简单的标记，另一方面要得到灵活的布局，这很难做到。CSS3在列表样式方面预期有一些改进，基于此，我们期待列表将来变得越来越有用。

至于目前，如果一个标记语言本身没有固有的列表元素，生成内容会有很大帮助，例如，可以插入图标之类的内容指向某种类型的链接（PDF文件、Word文档，甚至另一个网站的链接）。利用生成内容，还能很容易地打印链接URL，由于生成内容能插入引号并完成格式化，这对于网页设计中的排版非常有利，可以得到很好的效果。完全可以这么说：生成内容的用途只受你想象力的限制，只要想得到，生成内容就能做得到。更好的一点是，利用计数器现在还可以向任何元素（而不只是列表）关联序数信惠，如标题或代码块。如果你还希望利用设计支持用户界面方面的一些新特性，棋仿用户搡作系统的外观，那么请继续读下去。

当前名称：网页设计中的计数器和作用域
分享URL：https://www.cdcxhl.com/news45/168795.html

成都网站建设公司_创新互联，为您提供云服务器、关键词优化、商城网站、响应式网站、微信公众号、外贸网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联