CSS计数器的格式规则

最新推荐文章于 2024-10-13 17:00:37 发布

予以心诚

最新推荐文章于 2024-10-13 17:00:37 发布

阅读量198

点赞数

文章标签： css

本文链接：https://blog.csdn.net/NNNNNone/article/details/106434538

版权

只给属性选择器添加计数器

该属性选择器的父级元素添加/重置计数器 counter-reset: 任意字母;
在该属性选择器的前缀添加计数器递增 counter-incrament:a;
为该属性选择器添加内容content:“内容"counter(a)”:"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {
  counter-reset: a;
}

h2::before {
  counter-increment: a;
  content: "eee " counter(a) ": ";
}
</style>
</head>
<body>

<h1>使用 CSS 计数器:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>

<p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>

</body>
</html>

不过博主在练习计数器的时候遇到一个疑问，代码片中亚托克斯那一段没有和预期的显示相符，原因想不出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            counter-reset: hero;
            list-style-type: none;
        }
        li:before{
            counter-increment: hero;
            content:counters(hero,".")" ";
        }
    </style>
</head>
<body>
   <ul>
       <li>盖伦</li>
       <li>瑞兹</li>
         <ul>
             <li>奈德丽</li>
		          <ul>
                 <li>辛德拉</li>
                 <li>德莱厄斯</li>
             </ul>
             <li>亚托克斯</li>
              <ul>
                 <li>奥拉夫</li>
                 <li>易</li>
             </ul>
         </ul>
   </ul>

</body>
</html>