网页设计中的重置和递增

重置和递增

在网页设计中，创建计数器的基础包栝两个方面，一是能设置计数器的起点，二是能将其递增一定的置。

前者由属性counter-reset处理。

counter-reset

值：[?]+ | none | inherit

初始值：取决于具体的用户代理

应用于：所有元素

继承性：无

计算值：根据指定确定

计数器标识符只是创作人员创建的一个标签。例如，可以将小节计数器命名为subsection, subsec, ss甚至bob，只要重置（或递增）标识符，就足以使之建立。在以下规则中，计数器chapter就在重置时定义：

h1 {counter-reset: chapter;}

默认地，计数器重置为0。如果想重置为另一个数，可以在标识符后面声明这个数

h1#ch4 {counter-reset: chapter 4;}

还可以在标识符-整数对中一次重置多个标识符。如果少了一个整数，则默认为0:

h1 {counter-reset: chapter 4 section -1 subsec figure 1;}

/*'subsec' is reset to 0 */

从上例可以看到，负值是允许的。将计数器设罝为-32768并由此递增是完全合法的。

注意：如果采用非数值计数样式，CSS没有定义用户代理对于负计数器值该如何处理。例如，如果一个计数器的值是-5，但是其显示样式是upper-alpha，此时该采取什么行为？对此就没有定义。

总之，需要一个属性来指示元素将计数器递增。否则，计数器将永远保持计数器重置声

明中指定的值。毫无疑问，所需的这个属性就是counter-increment。

counter-increment

值：[?]+ | none | inherit

初始值：取决于具体的用户代理

应用于：所有元素

继承性：无

计算值：根据指定确定

类似于counter-reset,counter-increment也接受标识符-整数对，其中整数部分可以是0，也可以是负数或正数。与counter-reset的区别在于，如果counter- increment:中的标识符-整数对少了一个整数，则默认为1而不是0。

举例来说，，以下显示了在网页设计时用户代理如何定义计数器生成有序列表传统的1、2、3计数。

ol {counter-reset: ordered;}/* defaults to 0 */

ol li {counter-increment: ordered;}/* defaults to 1 */

另一方面，在网页设计时，创作人员可能希望从0向下计，使列表项使用一种渐进的负数体系，为此只獬稍作修改：

ol .{bounter-reset: ordered;}/* defaults to 0 */

ol li (counter-increment: ordered -1;}

列表的计数将是-1、-2、-3等等。如果将整数-1换成-2，列表的计数则是-2、-4、-6等等。

分享文章：网页设计中的重置和递增
文章地址：https://www.cdcxhl.com/news/170103.html

成都网站建设公司_创新互联，为您提供网站建设、品牌网站制作、电子商务、网站策划、网站营销、App设计

广告

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