ul li前面加序号

最新推荐文章于 2023-02-28 14:14:20 发布
最新推荐文章于 2023-02-28 14:14:20 发布
阅读量2.7k 收藏 5
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anny_mei/article/details/109534321
版权

效果图:
在这里插入图片描述
代码

ul {
      list-style: none;
      list-style-type: none;
      counter-reset: sectioncounter;
      li{
          margin-bottom: 12px;
      }
    }
    ul li:before {
      content: counter(sectioncounter) "、";
      counter-increment: sectioncounter;
      font-weight: bold;
      color: #fa9914;
      font-family: HelveticaNeue-Bold, HelveticaNeue;
    }

更详细请戳
https://blog.csdn.net/abeetle/article/details/41246741

神探小白牙
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
利用伪元素before给无序列表ul中的li添加有序序号
Web前端学习博客_Web_Jason365
08-17 1991
在建站过程中做侧边栏文章排行榜的时候，我们会为我们的网站文章进行一个排序，在这种情况下就会用到无序列表，那么少了序号排列网站看上去就不是那么美观。 原来未接触CSS3的时候，我的做法是在li元素前添加一个行内元素，给这个元素添加样式，这样感觉什么麻烦，而CSS3中的Before伪元素实现这样的功能就十分便捷。 需要实现伪元素before给无序列表li添加序号，需要在CSS3中做以下操作： 一、首先要给li标签设定一个计数器 li{counter-increment:number;} 二、通过伪元素
在ul中，点击其中一个<li>标签，弹出或输出相应的序号或相应文本内容
Char_n的博客
08-27 7231
ul中有li，点击li，获得对应的序号 Happy coding… 作为一个前端开发者，一定会遇到这样的一个问题： 一个&amp;lt;ul&amp;gt;中里面嵌套了好多空的&amp;lt;li&amp;gt;标签，点击&amp;lt;li&amp;gt;弹出它的序号（HTML不可以修改）。即点击第一个&amp;lt;li&amp;gt;标签时弹出0，点击第二个&amp;lt;li&amp;gt;标签时弹出
vue elementui 实现select下拉框多选，并且有多个select下拉框，有一个下拉框选中某项，其他下拉框将禁用已选中的项
qq_37570945的博客
12-10 3444
data: 计算属性： mounted的时候 解释： :disabled="!item.value.includes(item2.value)&&nodeLists.includes(item2.value)" 这个表示，当列表选中的项存在于公共列表，但是不存在于当前列表的时候给禁用掉。 ...
板邓：css ol 列表序列号样式
weixin_30782293的博客
03-26 265
一。示例 1.自定义序号， 一般的列表顺序都是以1.2.3.为序号，但需要“、”代替“.” ，这时我们就要自己定义，主要使用了CSS的counter-increment对部分和子部分进行编号，但问题是折行的部分不能自动缩进 [css]view plaincopy 1 ol{list-style-type:none;counter-reset:sect...
小白学习Python的第五天之列表的操作与方法
bbbbbya的博客
09-27 646
一. Python中的重复删除 # 练习：删除指定分数列表中所有低于60分的成绩 # scores = [98, 45, 34, 89, 23, 67, 23, 9, 54, 100, 78] # 删除后：[98, 89, 67, 100, 78] # 坑一：直接遍历用remove删除元素 - 删除不干净（因为遍历的时候没有把所有元素都遍历出来） scores = [98, 45, 34, 89, 23, 67, 23, 9, 54, 100, 78] new = scores[:] for i in ne
通过js在ul中插入10000个li，点击li打印出li的序号
weixin_38547641的博客
11-27 843
第一种 直接ul插入 花费了119ms-164ms window.onload = function () { let now = new Date() let ul = document.querySelector('.ul') for (let i = 0; i < 10000; i++) { let li = document.createElement('li')
ul ol li的序号编号样式
12-27 459
序号样式例子，下面是html代码（做参考） <ol> <li>列表内容列表内容列表内容列表</li> <li>列表内容列表内容列表内容列表</li> <li>列表内容列表</li> <li>列表内容列表内容4</li> <li>列表内容列表内容5<...
li样式不显示使用overflow:hidden导致Li前面点、圈等样式不见
09-25
用了overflow:hidden 会影响 list-style，即当ul 中的li 的overflow 为hidden的时候，list-style不起作用，不显示前面的点、圈等样式，在ul或li内加入样式：list-style-position: inside; 即可
html 拖动div进行相应顺序的排序，亲测可用，简单方便
07-14
1、html 拖动div进行相应顺序的排序，亲测可用，简单方便 2、适用于各大场景，通过相应的js拖动来执行相应的方法 3、可以下载应用，不懂的可以一起探讨
网页制作Dreamweaver选择题吐血上吊加强版X.docx
02-03
`<li>`标签则是在`<ul>`（无序列表）或`<ol>`（有序列表）中定义列表项。 Dreamweaver是一款强大的网页设计软件，它提供了多种功能来帮助用户快速构建和编辑网页。在创建框架网页时，可以通过设置框架属性来调整其...
JS库 Highlightjs 添加代码行号的实现代码
10-19
这个列表会被插入到代码块的前面，并且每个列表项（`<li>`）将表示一行代码的行号。 ```javascript $(function() { $('pre code').each(function() { var lines = $(this).text().split('\n').length - 1; var...
javascript如何用递归写一个简单的树形结构示例
12-12
str+="<li><span>"+v.id+"</span></li>" }) str="</ul>" $(doucment).append(str); 哼，easy! 语罢，又是一道题飞来! 哦，还带了儿子来当帮手。我一个循环再一个循环，轻松带走你们 var data2 = [ {"id":1,...
CSS HTML ul 列表序列号标记样式定义及使用方法
YDOOK
08-19 3892
使用方法： ul { list-style: list-style-type list-style-position list-style-image； } 使用示例： ul { list-style:square inside url('图片文件目录名'); } 属性： CSS list-style-type 属性 ul.circle {list-style-type:circl...
html ul li 不显示数字,css样式li不显示点点什么原因？怎么解决？
weixin_36410516的博客
06-23 3082
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。实际上用了overflow:hidden 会影响 list-style，即当ul 中的li 的overflow 为hidden的时候， list-style不起作用，不显示前面的点、圈等样式。解决办法：在ul或li内加...
html ul li 不显示数字,在ol li列表中看不到数字
weixin_36160969的博客
06-23 1846
我在网站上有一些编号列表, 其中包含我当前正在开发的wordpress模板。但是, 我看不到编号列表之前的数字。我已经设置了list-style-type：ol> li的小数, 并尝试了其他一些方法, 但是似乎没有任何效果。有人可以帮我吗？ (这可能是一个非常明显的错误, 但是我没有更多的方法去做这件事)谢谢！示例页面#1你无需在单个li上设置list-style-type, 但可以在包含的...
HTML的列表样式
Raccon_的博客
11-22 303
HTML5 无序列表 <ul type="disc(实心圆)/circle(空心圆)/square(方块)/none(无)"> <li>无序列表</li> </ul> 有序列表 <ol type="1/A/a/i/I(罗马) start="定位开始位置> <li>无序列表</li> </ol> 自定义列表 <dl> <dt>自定义问题
前端学习-HTML+CSS(2)
Michelle209的博客
02-28 142
帮助中心购物指南账户管理
CSS文字渐变色(从上往下)
anny_mei的博客
10-31 7784
效果图 css代码 color: #ffffff; text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1); background: linear-gradient(180deg, #ffffff 16%, #8dffe2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
ul中有li，点击li，获得对应的序号
最新发布
06-11
您可以使用JavaScript来实现此功能。您可以给每个li元素添加一个onclick事件处理程序，然后在点击时获取其index并将其存储在一个变量中。以下是一个示例代码： HTML代码： ``` <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> ``` JavaScript代码： ``` var myList = document.getElementById("myList"); var selectedIndex; for (var i = 0; i < myList.children.length; i++) { myList.children[i].onclick = function() { selectedIndex = Array.prototype.indexOf.call(myList.children, this); console.log(selectedIndex); } } ``` 在这个示例中，我们首先获取了ul元素和一个变量selectedIndex来存储所选li的索引。然后，我们循环遍历每个li元素，并为其添加一个onclick事件处理程序。在事件处理程序中，我们使用Array.prototype.indexOf.call()方法获取所选li元素在其父元素中的索引，并将其存储在selectedIndex变量中。最后，我们使用console.log()函数将所选li元素的索引输出到控制台中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值