我们可以检索 li 的默认计数器值吗?

2024-04-21

我们可以检索到CSSli 的默认计数器值?

例如:
如果我有 6 个<li>, 分成 2<ol>,但我想要<li>从 1 到 6 列出,而不是从 1 到 3 列出两次。我用了value="4"在第一个<li>第二个的<ol>,所以它有效,但现在因为我正在使用

ol {
  counter-reset: i 0;
}

ol li:before {
    content: counter(i);    
    counter-increment: i;
    font-weight: bold;
}​

The content: counter(i);不考虑value="4"在第一个<li>第二个的<ol>.

我能做点什么吗?

View on JsFiddle http://jsfiddle.net/MC8aP/


这适合您的需求吗?在 JSFiddle 上查看 http://jsfiddle.net/Hg4yg/

HTML

<ol>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>
<ol>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>

CSS

ol:first-of-type {
  counter-reset: i 0;
}

ol li:before {
  content: counter(i);    
  counter-increment: i;
  font-weight: bold;
}​
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我们可以检索 li 的默认计数器值吗? 的相关文章

  • 为什么我的 Web 组件 CSS 不显示?我没有使用shadowDOM

    我有一个没有使用 ShadowDOM 的 Native V1 组件 所以我将 CSS 放在 但是当其他人使用我的组件时 我的 CSS 就不再起作用了 仅当其组件确实使用 ShadowDOM 时才会发生这种情况 我的组件的示例代码 class
  • 选择子元素但不选择孙元素

    我有以下简化的代码 div p text p div div p text p div div p text p div div p text p div 每当我设置一些值时 content pCSS 文件中的元素 更改也适用于 col1
  • Wkhtmltopdf 每页右侧的垂直文本

    下面是使用 wkhtmltopdf 生成的 PDF 示例 我需要在每一页的右书脊上生成文本 我尝试将其添加到标题代码中 似乎会剪辑 PDF 的正文 我正在使用 wkhtmltopdf 的页眉和页脚参数 不太确定如何或是否可以在每个页面的右侧
  • CSS3 - 性能最佳实践是什么? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • CSS 圆角六边形按钮

    我可以使用 CSS 创建相同的按钮 圆角是重要部位 角是主要原因 带圆角的三角形按钮 请看我下面的代码和图片 lngbtn position relative width 150px height 50px margin 50px colo
  • css 在 body 上应用宽度

    我对 html 和 css 完全陌生 所以我的问题可能非常基本 但希望你们能帮助我 udnerstnad 我正在使用以下 css 代码 body background color Olive width 550px font family
  • 使绝对定位的div扩展父div高度

    正如你在下面的 CSS 中看到的 我想要child2将自己定位在之前child1 这是因为我目前正在开发的网站也应该在移动设备上运行 在移动设备上child2应该位于底部 因为它包含我想要在移动设备上的内容下方的导航 为什么不是 2 个母版
  • GWT - css 中常量的问题

    我是 GWT 新手 我正在构建一个小型示例应用程序 我有几个 CSS 文件 我能够成功使用 ClientBundle 和 CssResource 将样式分配给 UiBinder 脚本中定义的元素 现在我想更进一步 使用 def css ru
  • 构建两列 html 表单的最佳方法?

    对齐以下内容的最佳方法是什么 我想要 inputTitle左边和右边inputInput在右边 两者之间有错误 CSS crud form width 430px margin 10px solid font family Verdana
  • CSS3动画比例[重复]

    这个问题在这里已经有答案了 我正在尝试对 div 进行动画处理 以便在页面加载时它具有比例 0 0 并动画到比例 1 1 我遇到的问题是 一旦动画生效 div 就会再次缩放到 0 我想要的是 div 动画缩放 1 1 并保持这样 这是我的
  • IE jquery click 仅适用于 li 中的文本,不适用于整个框

    我创建了一系列作为 li 的按钮 我希望用户能够单击它们 ul class item list li class item button style color 4bb2c5 1 li li class item button style
  • 使用日期类型将输入字段中的日期居中

    我想将日期居中input not input inside div 如果我进行居中 它将把日期居中于input因为有一个右侧面板用于根据日历选择日期 该面板根据输入宽度调整大小 用于演示的小代码片段 center text align ce
  • primefaces 元素无法加载我的 css 文件的 url

    当我将样式 css 放在同一个 xhtml 页面中时 它可以与我的页面一起使用 例如
  • 在引导程序中使用容器流体会导致水平滚动条

    这是一个简单的例子 div class container fluid div class row div class col lg 12 DUMMY CONTENT div div div Fiddle 演示 http jsfiddle
  • 如何在 Chrome 中实现抓取光标图标?

    我知道可以在 Chrome 中使用抓取光标图标 当然是在 Gmail 中 但我不知道如何在我的代码中实现它 我已经尝试过 在CSS中 body cursor grab body cursor webkit grab body cursor
  • 当我尝试转发电子邮件时,时事通讯无法隐藏 Gmail 上的响应内容

    我正在尝试写一份时事通讯 但当我测试时 我无法隐藏响应式内容GMail On Outlook and Yahoo一切正常 但如果我尝试转发电子邮件 隐藏的内容就会可见 我测试使用 putsmail https putsmail com gt
  • Bootstrap:下拉菜单无法通过 jQuery 单击打开

    我正在创建一个包含多行的表 所有行都有一个 选项 按钮 该按钮应该显示下拉上下文菜单 为了使代码更短 我使用了一个div以便将其重用为上下文菜单的通用标记 我正在使用 Bootstrap 5 1 3 和 jQuery 3 6 0 以下是我的
  • HTML / CSS 如何将图像图标添加到输入类型=“按钮”?

    我使用下面的 CSS 但它将图像放在按钮的中心 使用任何方式左对齐或右对齐图标
  • 使用 JavaScript 从 URL 变量读取来加载不同的 CSS 样式表

    我试图在我的 WordPress 博客上使用两个不同的样式表 以便在通过 Web 访问页面时使用一个样式表 而在通过我们的 iOS 应用程序访问博客内容时使用另一个样式表 现在 我们将 app true 附加到来自 iOS 应用程序的 UR
  • 如何仅在第一次访问时弹出模态窗口

    我有一个模式窗口 当您访问某个页面时会弹出 访客必须选择我同意或我不同意 我需要一个漂亮的小 jquery 脚本 它会记住谁之前访问过该页面并同意 这样他们每次访问该页面时就不会弹出模式 有人可以推荐一个好的脚本来使用吗 这是代码 div

随机推荐

  • 防止PHP脚本被淹没

    我想防止我的脚本被淹没 如果用户按 F5 它每次都会执行脚本 我想防止这种情况并允许每 2 秒执行一个脚本 有什么解决方案吗 您可以使用内存缓存来执行此操作 简单的演示脚本 memcache new Memcache memcache gt
  • Typescript 中的 new() 是什么?

    我遇到了new 在官方文件中here https www typescriptlang org docs handbook generics html关于泛型 这是代码上下文 function create
  • javascript - 从输入类型=文件获取文件名和扩展名

    我有一个文件上传输入 当我单击浏览按钮并选择文件时 我希望文件名和扩展名显示在两个输入文本框中 请参阅代码示例 它与扩展名一起正常工作 但文件名还显示了给我 fakepath 警告的路径 我明白为什么 但是有什么好方法可以做到这一点并将文件
  • 在 thymeleaf spring boot 中,动态轮播滑块不起作用

    In my spring boot thymeleaf this following code is slider does not work well Show the result in image What wrong with in
  • 您应该如何诊断错误 SEHException - 外部组件抛出异常

    每当用户报告错误时 例如 System Runtime InteropServices SEHException 外部组件引发的异常 作为一名程序员 我可以做些什么来确定原因吗 场景 一名用户 使用我公司编写的程序 报告了此错误 这可能是也
  • 从另一个页面访问时引导滚动间谍

    我试图链接到主页的特定部分 同时保持滚动间谍功能 有了这个代码 li a href sec1 About a li 滚动间谍正在运行 但如果我尝试从主页以外的页面访问它 它只会添加 sec1 到当前页面的 url 没有效果 如果我把它改成
  • 关于在单列中查找重复项的宏的建议

    发现了很多涉及在两列中查找重复项的问题 i e MS Excel 如何创建宏来查找重复项并突出显示它们 https stackoverflow com questions 2162684 ms excel how to create a m
  • 为什么numba cuda调用几次后运行速度变慢?

    我正在尝试如何在 numba 中使用 cuda 然而我却遇到了与我预想不同的事情 这是我的代码 from numba import cuda cuda jit def matmul A B C Perform square matrix m
  • ggpairs 中的数字四舍五入

    是否可以将 ggpairs 中的相关数字舍入为例如 2 位数字 library GGally ggpairs iris columns 1 4 mapping ggplot2 aes col Species 这是一个修改版本ggally c
  • 用于累积逗号分隔字符串的 C++ 预处理器宏

    我需要执行以下操作 const char my var Something REGISTER my var const char my var2 Selse REGISTER my var2 concst char all OUTPUT R
  • SSIS 错误 - 包中的版本号无效

    失败作业对应的日志如下 2014 年 4 月 11 日 06 40 00 LPR New 错误 0 USPHND0088 LPR New 作业 结果 作业失败 该作业由 Schedule 14 调用 LPR New Job 最后运行的一步是
  • 如何检测远程机器的操作系统

    从基于 net 的应用程序中 确定远程计算机上运行的操作系统是 Windows 还是 Linux 的最快方法是什么 只需 ping 一下即可 如果 TTL 生存时间 为 254 或更小 则它是基于 UNIX 的 如果 TTL 为 128 或
  • WPF:多显示器编程

    我在用着WPF in C 我想从多显示器编程开始 这意味着该应用程序将在许多具有不同视图的显示器上显示 我在网上搜索过 我得到了使用的方法Screen AllScreens 但是我有以下问题 有多种方法可以将多台显示器连接到 PC 情况 1
  • PDF 文件中的隐写术 [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 有人能告诉我 哪里可以将一些数据隐藏到 PDF 文件中吗 换句话说 PDF 文件中的隐写术 有什么算法可以做到这一点吗 有很多方法可以做到这一点 包括
  • 如何用bind来定义apply?

    在 Haskell 中 Applicatives 被认为比 Functor 更强 这意味着我们可以使用 Applicative 来定义 Functor 例如 Functor fmap a gt b gt f a gt f b fmap f
  • Swift - 在 LaunchScreen 上执行代码 [重复]

    这个问题在这里已经有答案了 在 iOS 中 在应用程序准备就绪之前会有一个 LaunchScreen 您可以在此添加要做的事情 代码 吗 我想在 LaunchScreen 上执行 JSON 请求 但不知道将代码放在哪里 提前致谢 卡塞特 正
  • 是否可以更改 MediaRecorder 的流?

    getUserMedia constrains then stream gt var recorder new MediaRecorder stream recorder start recorder pause get new strea
  • 将对象转换为可编码对象失败

    我收到以下错误 Converting object to an encodable object failed Instance of Patient 0 JsonStringifier writeObject dart convert j
  • Deltaspike 和@Stateless Bean

    我想使用 DeltaSpike API 保护我的 无状态 EJb Stateless Remote UserServiceRemote class public class UserService implements UserServic
  • 我们可以检索 li 的默认计数器值吗?

    我们可以检索到CSSli 的默认计数器值 例如 如果我有 6 个 li 分成 2 ol 但我想要 li 从 1 到 6 列出 而不是从 1 到 3 列出两次 我用了value 4 在第一个 li li 第二个的 ol 所以它有效 但现在因为