css定义有序列表样式以及counter-reset、counter-increment 的使用

一、css定义有序列表样式

我们在使用有序列表时,常常需要自定义该列表的样式,自定义递增变量等,这篇文章就是告诉大家如何自定义一个有序列表的递增变量。


<html>
<head>
    <title>有序列表自定义递增变量title>
    <meta charset=UTF-8>
    <style type="text/css">
        ol{
            counter-reset: li;
            list-style: none;
            background: rgba(0,0,0,0.3);
        }
        ol li a:before{
            content:counter(li)"===~~~ ";  
            counter-increment: li;
        }
    style>
head>
<body>
    <ol>
        <li class="odd"><a>第一行a>li>
        <li><a>第二行a>li>
        <li class="odd"><a>第三行a>li>
    ol>
body>
html>

从这部分代码运行结果如下(未做样式 有点丑)
css定义有序列表样式以及counter-reset、counter-increment 的使用_第1张图片

分析一下这个自定义变量的过程:
1、首先,需要隐掉ol原有的样式,使用list-style: none;
2、为ol设置一个新的变量值counter-reset: li;
3、设置变量li为自递增变量,默认每次+1,counter-increment: li;
4、递增数值的样式修改,content:counter(li)”===~~~ “; 该部分的作用就 是1 ===~,当然也可以在递增值前加上文字描述如:content:(行)counter(li)”.”

二、css的counter-reset 和counter-increment属性使用(引用)
counter-reset 属性

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

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

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

counter-increment 属性

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

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

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

我们了解后就来看看一个简单示例:


<html>
<head>
    <meta charset=UTF-8>
    <style type="text/css">
        body {
            counter-reset:jiawin;
        }
        h1 {
            counter-reset:subjiawin;
        }
        h1:before {
            content:"类别 " counter(jiawin) ". ";
            counter-increment:jiawin;
        }
        h2:before {
            counter-increment:subjiawin;
            content:counter(jiawin) "." counter(subjiawin) " ";
        }

        /** 以下为页面装饰代码 **/
        body, h1, h2 {padding:0; margin:0;}
        body {background-color:#fee0ef;}
        .main {
            width:600px;
            margin:100px auto; 
            height:auto; 
            overflow:hidden; 
            box-shadow:0px 1px 5px rgba(0,0,0,0.5);
        }
        .main h1 {
            background:#936; 
            padding:5px; 
            border-top:1px solid #df94b9; 
            border-bottom:1px solid #df94b9;
        }
        .main h2 {
            background-color:#c47da0; 
            padding:5px; 
            border-bottom:1px solid #cd8fae;
        }
    style>
head>
<body>
    <div class="main">
        <h1>h1>
        <h2>h2>
        <h2>h2>
        <h1>h1>
        <h2>h2>
        <h2>h2>
        <h2>h2>
        <h1>h1>
        <h2>h2>
        <h2>h2>
    div>
body>
html>

这段代码的执行结果如下:
css定义有序列表样式以及counter-reset、counter-increment 的使用_第2张图片

该段引自http://www.jiawin.com/css-counter-increment-counter-reset

你可能感兴趣的:(css定义有序列表样式以及counter-reset、counter-increment 的使用)