提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css计数器怎样完成自动嵌套编号【css教程】,css,计数器,自动编号

在css中能够运用计数器函数counter()和counters()合营content属性来离别完成给元素自动嵌套编号的结果,下面我们就来看看CSS计数器函数counter()和counters()是怎样自动嵌套编号的。

css计数器运用多个counter()函数嵌套编号

css计数器的counter()函数是设置元素单个编号的,但我们能够嵌套运用counter()函数来设置嵌套编号。

我们来看看是怎样完成的,给出html代码:

<article>
    <h1>CSS计数器自动嵌套编号</h1>

    <h2>大题目</h2>
    <h3>二级题目</h3>
    <p>
              二级题目的内容,二级题目的内容,二级题目的内容!
    </p>


    <h2>大题目</h2>
    <h3>二级题目</h3>
    <p>
              二级题目的内容,二级题目的内容,二级题目的内容!
    </p>
    <h3>二级题目</h3>
    <p>
             二级题目的内容,二级题目的内容,二级题目的内容!
    </p>
  </article>

结果图:

下面我们就来看看css是怎样完成嵌套编号的。

1、运用css计数器让大题目<h2>自动编号

在h2标签的父容器article标签中运用counter-reset属性给css计数器增加称号“my-counter”,初始化计数器;

然后在h2标签中运用counter-increment属性定义计数器每次递增的值,默许值为1,可省略。

末了运用:before选择器和content属性把编号增加到h2标签前显现。

article {
  counter-reset: my-counter;
}
h2 {
  counter-increment: my-counter;
}
h2:before {
  content: counter(my-counter) ". ";
}

结果图:

2、运用css计数器让二级题目<h3>自动编号

在h3标签的父容器h2标签中给css计数器增加称号“sub-counter”,初始化计数器;

然后在h3标签中定义计数器每次递增的值,在定义二级题目的款式。

末了运用:before选择器和content属性把编号增加到h3标签前显现。

h2 {
  counter-reset: sub-counter;
}
h3 {
  counter-increment: sub-counter;
  font-style: italic;
  color: #3498DB;
}
h3:before {
  content: counter(my-counter) "." counter(sub-counter) " ";
}

运用counter(my-counter) 把大题目的编号放在最前面,在运用"."分开,然后是运用counter(sub-counter)显现二级题目本身的编号。

结果图:

css计数器运用counters()函数嵌套编号

运用counters()函数,我们能够在一个声明中设置多个计数器,默许情况下这些计数器将嵌套。

注:counters()函数只要在对现实嵌套在标记中的嵌套元素举行编号时, 该函数才有用。例:<ul><li>标签

下面我们经由过程简朴的代码示例来看看counters()函数是怎样嵌套标号的。

html代码:

<div class="container">
  <ul>
    <li> Item
      <ul>
        <li>Sub-Item</li>
        <li>Sub-Item
          <ul>
            <li>Sub-Sub-Item</li>
            <li>Sub-Sub-Item</li>
          </ul>
        </li>
      </ul>
    </li>
    <li> Item
      <ul>
        <li>Sub-Item</li>
        <li>Sub-Item</li>
        <li>Sub-Item</li>
      </ul>
    </li>
  </ul>
</div>

css代码:

.container {
  margin: 40px auto;
  max-width: 700px;
  background-color: white;
  padding: 1.5em;
}

ul {
  list-style: none;
  counter-reset: nested-counter;/*初始化css计数器*/
}

ul li {
  counter-increment: nested-counter;/*定义css计数器每次递增的值*/
  line-height: 1.6;
}
ul li:before {
  content: counters(nested-counter, ".") ") ";/*显现编号*/
  font-weight: bold;
}

结果图:

总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。

以上就是css计数器怎样完成自动嵌套编号的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"css计数器怎样完成自动嵌套编号【css教程】,css,计数器,自动编号"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线