css的content属性，以及如何通过css content属性实现css计数器？

最新推荐文章于 2024-06-24 20:07:37 发布
最新推荐文章于 2024-06-24 20:07:37 发布
阅读量728 收藏
点赞数 1
分类专栏： web前端 前端技术分享 文章标签： css计数器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xutongbao/article/details/79469170
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css的content属性，以及如何通过css content属性实现css计数器？</title>
    <style>
        body{margin:0;padding:0;}
        
        .m-container{background:#000080;border:1px solid red;}
        .m-left{float:left;width:20%;height:200px;background:#DDD}
        .m-clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
        .m-clearfloat{zoom:1} 

        .m-test ol { counter-reset: section; list-style-type: none; }
        .m-test ol li { counter-increment: section; }
        .m-test ol li:before { content: counters(section, "-") ". "; }
        /*.m-test ol li:before { content: counters(section, "-", upper-roman) ". "; } */ /*大写罗马数字*/
        /*.m-test ol li:before { content: counters(section, "-", lower-alpha) ". "; }*/ /*字母*/
    </style>
</head>
<body>

<div class="m-container m-clearfloat">
    <div class="m-left">Left</div>
</div>

<div class="m-test">
    <ol>
        <li>水果
            <ol>
                <li>苹果</li>
                <li>苹果</li>
                <li>苹果</li>
            </ol>
        </li>
        <li>水果
            <ol>
                <li>香蕉</li>
                <li>
                    香蕉
                    <ol>
                        <li>海南香蕉</li>
                        <li>海南香蕉</li>
                        <li>海南香蕉</li>
                        <li>海南香蕉</li>
                    </ol>
                </li>
                <li>香蕉</li>
            </ol>
        </li>
        <li>水果</li>
    </ol>
</div>
 
</body>
</html>



备注：欢迎加入web前端求职招聘qq群：668352707

徐同保
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS 变量 var() 函数
Serena_tz的博客
03-16 4617
var() 函数用于插入 CSS 变量的值。CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。 var() 函数的语法 var() 函数的语法如下： var(name, value) 值 描述 name 必需。变量名（以两条破折号开头）。 value 可选。回退值（在未找到变量时使用）。
css【详解】—— content属性（含css计数器）
朝阳39的博客
03-22 4454
目录 content属性的特点 content属性的应用 1. 清除浮动 2. 实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”效果 3. 生成文本 4. 生成图片 5. 生成属性值 6. 计数器 属性counter-reset 属性counter-increment 方法counter() 方法counters() content属性生成的对象称为“匿名替换元素”，生成的内容都是替换元素 content属性的特点 1. content生成的文本无法被选中 conte
CSS中的content
2301_78986604的博客
06-24 164
CSS 中其他的伪元素有：::before、::after、::first-letter、::first-line、::selection 等；必须设置 content 属性，否则一切都是无用功， content 属性也只能应用在 :before 和 :after 伪元素上；默认user-select: none，就是 :before 和 :after 的内容无法被用户选中；::before 和 ::after 是CSS3中的写法，为了将伪类和伪元素区分开；认识 :before 和 :after。
content计数器
caimaomaocai的博客
04-07 1016
注：本博客中大部分例子来自于 张鑫旭的《css世界》, 已征得张老师本人同意 content计数功能非常强大，可以实现用js都不好实现的效果 content计数器有两个属性: counter-reset和counter-increment ，方法（counter()/counters()） 属性counter-reset:就是“计数器-重置”的意思，作用就是给这个计数器起个...
html div content,CSS3 content属性学习
weixin_32080327的博客
06-16 534
content用来和:after及:before伪元素一起使用，在对象前或后显示内容。content的取值：normal：默认值。表现与none值相同none：不生成任何值。：插入标签属性值：使用指定的绝对或相对地址插入一个外部资源(图像，声频，视频或浏览器支持的其他任何资源)：插入字符串counter(name)：使用已命名的计数器counter(name,list-style-type)：使用...
html中content属性什么用,css中content属性，有什么作用？有什么应用？
weixin_39663970的博客
06-07 1185
1.背景介绍content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被所有主流浏览器支持。在CSS 3 Generated Content工作草案中，content属性添加了更多的特征，例如：插入以及移除文档内容的能力，以创建脚注，结语，及段落注释。但是目前还没有浏览器支持content的扩展功能。2.知识剖析1.content属性与 ...
CSS中的content属性使用教程
09-27
总的来说，`content`属性是CSS中一个强大的工具，它不仅限于简单的文本插入，还能与各种伪元素和函数结合，实现复杂的页面装饰和信息展示。在设计和开发过程中，熟练掌握`content`属性的用法，可以极大地提高布局和...
CSS3中的content属性使用示例
09-25
CSS3中的`content`属性是CSS3新增的一个非常有用的功能，它主要用于伪元素`::before`和`::after`，允许我们在元素前后插入内容。这个属性对于网页的装饰和增强用户体验有着重要的作用。以下是关于`content`属性的...
css counter计数器与content总结
11-20
接下来，我们讨论CSS计数器，它是与`content`属性紧密相关的另一个特性。CSS计数器主要用于自动化编号，特别是在多级列表或章节标题等场景下。计数器主要包括三个部分： 1. `counter-reset`属性用于初始化或重置...
利用css计数器属性(counter)实现列表序号自动增加.zip
最新发布
06-26
使用场景：本例通过css的计数器属性实现了有序列表的序号自动增加效果。案例设计美观，非常实用。可用于各种排行的展示需求。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、不使用JQ框架。 ...
html计数器功能实现包括css页面
06-05
html计数器功能实现包括css页面html计数器功能实现包括css页面html计数器功能实现包括css页面html计数器功能实现包括css页面html计数器功能实现包括css页面html计数器功能实现包括css页面html计数器功能实现包括css...
html中content属性,CSS content 属性 | 菜鸟教程
weixin_32661017的博客
06-05 3555
content 属性遵循一个原则：CSS 仅仅改变样式。因此，所加入的内容不会在 HTML 代码中直接展现：事实上，打开 F12 调试会发现浏览器把 before 作为一个特殊的节点嵌入到目标元素中。这是很有用的一点，例如要制作一个伪输入元素(使用 contenteditable)时：默认值这一行 HTML 代码表示一个可编辑(仅允许纯文本)的段落，并且设置该“输入元素”的默认值。但是在一般的 i...
CSS3的content属性详解
weixin_34151004的博客
05-10 562
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。 插入纯文字 content:"插入的文章"，或者content:none不插入内容 html: <h1>这是h1</h...
CSS中content属性的妙用
weixin_41394875的博客
08-06 8011
前言 本文讲解CSS中使用频率并不高的content属性，通过多个实用的案例，带你由浅入深的掌握content的用法，让代码变得更加简洁、高效。 定义 W3school中这样定义： content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。 在前端日常开发中，content属性使用频率并不高，所以开发者一般对它的理解并不深入，通常会在清除浮动、字
css中content的使用
热门推荐
haoyanyu_的博客
05-08 1万+
1.显示具体内容（跟：after 和：before配合使用） HTML：  CSS  :   效果如下： 2.通过attr（）显示标签的属性 HTML：  CSS:  效果如下：  3.显示字符集图标 更多字符可以访问https://blog.csdn.net/sinat_17775997/article/details/52384680 4.图片替换文字 HTML...
css的content 属性实现 css 计数器（伪元素与content实现）
林啾啾的博客
03-01 251
这里写目录标题伪元素与content简介什么是伪元素？伪元素的语法：CSS - ::after 伪元素CSS - ::before 伪元素content的作用css计数器相关属性1.counter-reset2.counter-increment3. counter()/counters()计数器示例 伪元素与content简介 什么是伪元素？ CSS 伪元素用于设置元素指定部分的样式。 例如，它可用于： 设置元素的首字母、首行的样式 在元素的内容之前或之后插入内容 伪元素的语法： selector::ps
img id属性_【CSS系列】被忽略的content属性
weixin_39647186的博客
11-22 371
CSS的 content 属性，大家应该都不陌生，很多时候我们都使用过，一般情况下你看到最多的用法无外乎这样两种：一种用于清除浮动，一种用于我们经常使用的字体图标。.clear:after { content: ""; display: block; clear: both; } .icon:before { content: "e778"; }大多数都会停留这个阶段，很少会探索...
html中content属性,CSS3的content属性详解
weixin_33673142的博客
06-05 9164
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content:"插入的文章"，或者content:none不插入内容html:这是h1这是h2cssh1::after{content:"h1后插入内容"}h2::after{content:...
读《CSS世界》小记 4.1.2-6 content计数器
qq_39438801的博客
12-22 120
前言 前面的几章都是读完之后才把标题加完整的，因为我不确定都到哪里会有足够的篇幅，但是这一章节直接指定了小节数，懂了吧，这一小节非常非常的长，例子非常非常的多，写这句话时我知识粗略的翻了一遍。开始吧 content-reset 顾名思义，计数器重置，作用是起名字+指定初始值 可以同时初始化多个计数器， 名1 值1 名2 值2 其中都是使用 空格分离，空格分离，空格分离，空格分离 名字的指定规则：正常命名 值的指定规则：尽量为整数，chrome浏览器对小数向下取整，其他的浏览器不识别 普照规则：
HTML5+CSS3 content属性实现项目编号与样式定制
"HTML5+CSS3 使用content属性的文档详细介绍了如何通过content属性与counter属性结合，为HTML元素添加连续编号、自定义文字以及样式。文档涵盖了以下关键知识点： 1. **content属性**：在CSS中，`content`属性主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐同保

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值