zoukankan      html  css  js  c++  java
  • css设置某个选择器出现次数的计数器并输出

    1、counter-reset 属性
    用法:counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。

    说明:利用这个属性,计数器可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。

    注释:如果使用 “display: none”,则无法重置计数器。如果使用 “visibility: hidden”,则可以重置计数器。

    2、counter-increment 属性
    用法:counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

    说明:利用这个属性,计数器可以递增(或递减)某个值,这可以是正值或负值。如果没有提供 number 值,则默认为 1。

    注释:如果使用了 “display: none”,则无法增加计数。如使用 “visibility: hidden”,则可增加计数。

    3、content 属性

    content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

    content属性值:

    说明
    none 设置Content,如果指定成Nothing
    normal 设置content,如果指定的话,正常,默认是"none"(该是nothing)
    counter 设定计数器内容
    attr(attribute) 设置Content作为选择器的属性之一。
    string 设置Content到你指定的文本
    open-quote 设置Content是开口引号
    close-quote 设置Content是闭合引号
    no-open-quote 如果指定,移除内容的开始引号
    no-close-quote 如果指定,移除内容的闭合引号
    url(url) 设置某种媒体(图像,声音,视频等内容)
    inherit 指定的content属性的值,应该从父元素继承
    #progressbar {
    	counter-reset: step;
    }
    #progressbar li:before {
    	content: counter(step);
    	counter-increment: step;
    }
    #progressbar li:after {
    	content: '';
    }
    #progressbar li:first-child:after {
    	content: none; 
    }
    

      

  • 相关阅读:
    form 表单验证常用正则记录
    定位某一项值在多维数据中的位置
    jquery weui picker多次动态赋值
    页面旋转立方体图片
    微信开发者工具中的正则表达式解析
    Jquery WEUI 滚动加载(infinite)不触发
    背景线条实现
    进入博客
    tomcat 修改内存配置
    win10配置jdk环境变量
  • 原文地址:https://www.cnblogs.com/ccllj/p/9174806.html
Copyright © 2011-2022 走看看