content和counter用法

最新推荐文章于 2022-01-06 16:01:36 发布

weixin_45729161

最新推荐文章于 2022-01-06 16:01:36 发布

阅读量699

点赞数

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/weixin_45729161/article/details/102490782

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

content和counter插入编号

1.加上连续编号

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

    h4::before{
      content: counter(num)'.';
      color: #f00;
    }
    h4{
      counter-increment: num;
    }
  </style>
</head>
<body>
    <h4>标题一</h4>
    <h4>标题二</h4>
    <h4>标题三</h4>
    <h4>标题四</h4>
    <h4>标题五</h4>
</body>
</html>

2.指定编号种类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

    h4::before{
      content: counter(num,upper-alpha)'.';
      color: #f00;
    }
    h4{
      counter-increment: num;
    }
  </style>
</head>
<body>
    <h4>标题一</h4>
    <h4>标题二</h4>
    <h4>标题三</h4>
    <h4>标题四</h4>
    <h4>标题五</h4>
</body>
</html>

3.编号嵌套

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    h1::before{
      content: counter(num)'.';
    }
    h1{
      counter-increment: num;
      counter-reset: littenum; /* 重置小标题编号 */
    }
    h4::before{
      content: counter(littenum)'.';
    }
    h4{
      counter-increment: littenum;
      margin-left: 40px;
    }
  </style>
</head>
<body>
	<h1>标题</h1>
    <h4>小标题</h4>
    <h4>小标题</h4>
    <h4>小标题</h4>
    <h1>标题</h1>
    <h4>小标题</h4>
    <h4>小标题</h4>
    <h4>小标题</h4>
    <h1>标题</h1>
    <h4>小标题</h4>
    <h4>小标题</h4>
    <h4>小标题</h4>
</body>
</html>

4.总结

counter属性值对多个项目进行连续编号，计数器可任意命名（ content:counter(计数器名) ）
counter-increment属性设置为counter属性值所指定的计数器名
在编号中追加文字content的设置方法为：（ content:'第’counter(计数器名)‘个’ ）
指定编号种类：content:counter(计数器名，种类) 。例如使用大写字母编号时使用 “upper-alpha”。
编号嵌套时需在大标题中使用counter-reset进行编号重置

weixin_45729161

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
content和counter用法

content和counter插入编号1.加上连续编号<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
复制链接

扫一扫