说说css的counter

最新推荐文章于 2023-09-04 20:07:48 发布

世纪殇

最新推荐文章于 2023-09-04 20:07:48 发布

阅读量190

点赞数

分类专栏：网页

本文链接：https://blog.youkuaiyun.com/dasgk/article/details/103208068

版权

网页专栏收录该内容

7 篇文章

订阅专栏

无他上代码

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<style>
body{
        counter-reset:first-class 0;
}
.container{
        counter-reset:second-class 0;
}
.f-class::before{
        counter-increment:first-class;
        content:counter(first-class)
}
.item::before{
        counter-increment:second-class 1;
        content:counter(first-class)"-"counter(second-class);
}
</style>
<divi class="container">
        <div class= "f-class">零食</div>
        <div class= "item">巧克力</div>
        <div class= "item">饼干</div>
        <div class= "item">糖果</div>
</div>
<divi class="container">

        <div class= "f-class">蔬菜</div>
        <div class= "item">黄瓜</div>
        <div class= "item">木瓜</div>
        <div class= "item">西红柿</div>
</div>

</body>
</html>