hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

css计数器怎样完成自动嵌套编号【html5教程】

2019-11-26HTML搜搜PHP网65°c
A+ A-
在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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
css计数器怎样完成自动嵌套编号【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章