zoukankan      html  css  js  c++  java
  • css3中计数器的使用

    css3里有个很强大的功能,就是计算器,使用它可以很方便对页面中的任意元素进行计数,实现类似于有序列表的功能。与有序列表相比,突出特性在于可以对任意元素计数,同时实现个性化计数

    简而言之,计数器就是采用css给html元素自动生成编号。其本质上是由css维护的变量,其值可以通过css规则递增以跟踪它们的使用次数。

    一、css计数器相关属性:

    1.counter-reset 

    定义计数器,包括初始值,作用域等;   值为计数器的名称。默认情况下,计数器从0开始。此属性还可用于将其值更改为任何特定数字。记住在必须在父节点初始化你需要的计数器,不然序号肯定是不对的。当元素display:none时,该属性失效。

    它的值包括两部分:第一部分为计数器的名字;第二部分为计数器的起始值(默认为0),counter-reset还可以同时声明多个计数器比如:

    counter-reset: count 0  /*标识计数器count从1开始*/
    counter-reset: count2 2 /*标识计数器count2 从3开始*/
    counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器,count1,count2,count3*/
    

      

    2.counter-increment

    用于可计数的元素中,设置计数器的增数;

    他的值也包括两部分:第一个为计数器的名字,即counter-reset设置好的名字,第二个值标识递增的值(默认为1),比如: 

    counter-increment: count 1 /*表明每次递增 1*/   
    counter-increment:count 2 /*表明每次递增 2*/
    

      

    3.counter()

    content和counter需要搭配使用,content主要是跟 :after, :before,::after,::before来搭配用的,counter主要是给元素插入计数器的值。 语法如下:

    content:counter(name)  
            counter(name,list-style-type) 
            counters(name,string) 
            counters(name,string,list-style-type)
    

      

    name就是你计数器的名字。

    string为在计数器之间的字符串。

    list-style-type可以用来指定计数器的样式,比如可以用1,2,3,4来计数,也能用a,b,c,d来计数 。list-style-type样式如下:

    disc:css1默认值。实心圆
    circle:css1空心圆
    square:css1实心方块
    decimal:css1阿拉伯数字
    lower-roman:css1小写罗马数字
    upper-roman:CSS1大写罗马数字
    lower-alpha:CSS1小写英文字母
    upper-alpha:CSS1大写英文字母
    none:CSS1不使用项目符号
    armenianl:CSS2未支持。传统的亚美尼亚数字
    cjk-ideographic:CSS2未支持。浅白的表意数字
    georgian:CSS2未支持。传统的乔治数字
    lower-greek:CSS2未支持。基本的希腊小写字母
    hebrew:CSS2未支持。传统的希伯莱数字
    hiragana:CSS2未支持。日文平假名字符
    hiragana-iroha:CSS2未支持。日文平假名序号
    katakana:CSS2未支持。日文片假名字符
    katakana-iroha:CSS2未支持。日文片假名序号
    lower-latin:CSS2未支持。小写拉丁字母
    upper-latin:CSS2未支持。大写拉丁字母

    例子:

    content:"F." counter(counter);在计数器前面添加‘F.’
    content:counter(counter,lower-alpha);  指定计数器的列表样式;
    content:counters( counter  ,".") " ";   在计数器之间加点号,同时在计数器末尾加一个空格;
    content:counters( counter  ,".",lower-roman) " ";定义计数器为小写罗马数字格式,同时加点号,空格;
    

      

    二、css计数器例子  

    创建计数器步骤:

    第一步:声明计数器:要使用CSS Counters生成自动计数器,首先就是通过counter-reset属性先声明一个计数器名称。
    第二步:设置计数器:counter-reset只是定义了一个计数器标识符,在实际使用中,需要通过counter-increment属性来控制计数器的增减。 
    第三步:显示计数器:最后一步,就是如何显示计数器了。显示计数器需要通过:before、content和counter():来进行设置。 

    html:

    <ul>
      <li>List item</li>
      <li>List item</li>
      <ul>
        <li>List item</li>
      </ul>
    </ul>
    

      

    css:

    ul {
      counter-reset: counter;
    }
    li::before {
      counter-increment: counter;
      content: counters(counter, '.') ': ';
    }
    

      

    效果如下:

    • List item
      List item
      List item
      

        

    新片场https://www.wode007.com/sites/73286.html 傲视网https://www.wode007.com/sites/73285.html

    三、css计数器中常见问题

    怎么让计数器倒序计数?         

    只要把增量counter-increment为负数即可。 

    怎么改变计数器的计数符号?        

    counter()的默认样式为decimal,即数字。 

    我们可以根据需要修改成其他样式,例如:upper-roman(罗马数字) 

    计数器的兼容性?

    目前主流浏览器基本都支持counter-reset属性。 

    注意: 因为在IE6 和IE7 以及IE8的IE7兼容模式中,:before 和:after 都不被支持,所以可以认为它们都不支持content 属性,测试也就毫无意义,所以这个列表将IE6、IE7和IE8的IE7兼容模式忽略。IE8只有指定!DOCTYPE才支持counter-reset属性

    CSS计数器除了用来计数还有什么其他的作用?

    CSS计数器对于生成大纲列表特别有用,因为计数器的新实例是在子元素中自动创建的。使用counters() 函数,可以在不同级别的嵌套计数器之间插入分隔文本。

    除了生成篇数、章节和段落以外,CSS计数器还被应用于计算数据类型的小游戏当中。 

    CSS计数器与display:none的使用会造成什么影响?

    一个元素,如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性(针对支持浏览器),则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。

      

    counter计数器能和ol、ul同时使用吗?

     counter计数器可以和ol、ul同时使用,符合起来还能达成复合序号的效果  

  • 相关阅读:
    小结一下在函数使用的时候加括号和不加括号的区别
    总结一下
    JavaScript中操作有些DOM时关于文本节点和元素节点的问题。
    HP DL388 gen9服务器安装RHEL 6.5系统
    第一次经历黑客攻击服务器系统
    小红帽5.9 配置静态IP上网问题
    redhat linux enterprise 5 输入ifconfig无效的解决方法
    关于将一台电脑分割成2个独立运行个体的测试...(1)
    Ubuntu 小白安装血泪史
    RHL 6.0学习日记, 先记下来,以后整理。
  • 原文地址:https://www.cnblogs.com/ypppt/p/13333489.html
Copyright © 2011-2022 走看看