像数组一样对有序列表
    进行编号,用括号将数字括起来

2024-05-07

我有这个清单:

<ol start="0">
  <li>Tokyo Skytree</li>
  <li>Canton Tower</li>
  <li>CN Tower</li>
  <li>Ostankino Tower</li>
  <li>Oriental Pearl Tower</li>
</ol>

这显示了这样的内容:

1. Tokyo Skytree
2. Canton Tower
3. CN Tower
4. Ostankino Tower
5. Oriental Pearl Tower

现在我想要的是这样的东西:

[1] Tokyo Skytree
[2] Canton Tower
[3] CN Tower
[4] Ostankino Tower
[5] Oriental Pearl Tower

理想情况下,我想要一个从 0 开始的数组,例如:

[0] = Tokyo Skytree
[1] = Canton Tower
[2] = CN Tower
[3] = Ostankino Tower
[4] = Oriental Pearl Tower

我读过关于CSS 编号样式 http://css-tricks.com/numbering-in-style/ and CSS 列出 W3C 草案 http://dev.w3.org/csswg/css-lists/#predefined-counters但我无法找出有效的解决方案。


你可以这样做:

ol {
  counter-reset: o-counter -1;
  list-style-type: none;
}
ol li:before {
  content: '[' counter(o-counter) '] = ';
  counter-increment: o-counter;
}

http://jsfiddle.net/userdude/Fb3ab/2/ http://jsfiddle.net/userdude/Fb3ab/2/

请记住o-counter(或者无论你怎么称呼它)需要在父母身上UL/OL让它增加。并且,IE7也不支持这个。

更多信息:

  • http://www.w3.org/TR/CSS21/generate.html#counters http://www.w3.org/TR/CSS21/generate.html#counters
  • http://css-infos.net/property/content http://css-infos.net/property/content
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

像数组一样对有序列表
    进行编号,用括号将数字括起来 的相关文章

  • IE8 - 隐藏 div 内的表单,返回键不再起作用

    我有一个登录表单 位于带有 display none 的 div 中 然后我使用 jquery 淡入表单 但 Enter Return 键不再提交表单 如果我将显示更改为阻止 则效果很好 此问题仅存在于 IE 中 有任何想法吗 这是一个不起
  • 滚动时多个图像淡出

    我有一个页面 在每个导航点上 网站中间的图像通过淡入淡出来改变颜色 我设法淡入 active3 fadeIn 2000 不过 我遇到了再次淡出它的问题 让我尝试解释一下 我有 5 个导航点和 5 个不同的图像 如果我 例如 从第一个导航点滚
  • 单击后按键不会删除过渡

    我认为问题可能出在const 音频 document querySelector audio data key e keyCode const key document querySelector key data key e keyCod
  • Sass mixin 将背景透明度恢复到 IE8

    我是 Sass 新手 并为此苦苦挣扎 我无法在两者中渲染颜色hex 对于 IE 和rgba 每一个小片段都让我感到沮丧 因为我还没有掌握语法 而且 Sass 的 Google 结果仍然很少 这是混合 mixin transparent he
  • 在 R 中修改传单弹出窗口

    我想修改 R 中传单弹出窗口的外观 帮助文件指出 in the popupOptions 函数需要 传递给底层 Javascript 对象构造函数的额外选项 In 这个例子 https rstudio github io leaflet p
  • 如何在 Shiny 中动态渲染的 textInput 添加样式元素

    你好堆栈溢出 在我最近提出的问题中 我已经解决了一些与动态渲染 UI 元素相关的主要问题 并在一些了不起的人的帮助下动态创建了观察者 参见此处 动态渲染的 UI 如何在第二次运行时删除旧的反应变量 https stackoverflow c
  • 固定 Div 与静态 div 的滚动条重叠

    我无法按照我想要的方式设计布局 我有一个内容区 content 您可以在示例图像中看到的灰色 里面有一个黄色元素 这个div是position static height 100 现在我有一个 left paneldiv 也 与positi
  • 如何在 CSS 中将 RadioButton 图标样式设置为无(在 Flex 3 中)?

    您可以通过在 CSS 中设置以下值来在 Flex 中设置 RadioButton 的外观 upSkin Embed overSkin Embed ownSkin Embed disabledSkin Embed selectedUpSkin
  • 为什么我的 CSS 属性被覆盖/忽略?

    我对 CSS 层次结构 有一些问题 不确定将其称为层次结构是否正确 我正在尝试设置以下 HTML 的样式 section section
  • Twitter Typeahead 上使用 Bootstrap 3 的 CSS 问题

    随着 Bootstrap 3 的发布 Typeahead 已被删除 取而代之的是 https github com twitter typeahead js https github com twitter typeahead js 我已经
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h
  • Bootstrap 3 工具提示被包裹在每个空白处?

    升级到 bootstrap 3 后 工具提示会包裹在每个空白处 我相信这是由于网格而发生的 因此 如果我为文本框选择列 col sm 3 并且如果我将工具提示放在右侧 它将包裹所有空白并显示如下 如果我执行 data placement t
  • 提升变焦不起作用

    我正在使用带有苹果风格幻灯片画廊的提升缩放功能 一切正常 然而 缩放功能会放大被滑块隐藏的隐藏图像 直到单击缩略图时它们变得可见 启动缩放插件的原始代码是 zoom 01 elevateZoom 我从其他问题中得到了下面的 JavaScri
  • 仅在 Safari 中位于 div 外部的文本

    我有这个错误 让一些文本出现在右侧 div 之外的几个像素处 奇怪的是 这种情况只发生在 Safari 中 我以前从未见过它 它只是我使用过的常规 HTML CSS 我在互联网上环顾四周 但找不到完全相同的问题 由于高度固定 只有一些内容在
  • 表格底部的粘性滚动条

    我不确定 粘性 是否是这个术语 但是有没有办法使滚动条overflow auto保持可见 我有一个相当大的表格 我希望它可以水平滚动 但是 表格也相当高 因此当页面加载时 水平滚动条不在浏览器的视口内 因此很难判断表格是否可滚动 div s
  • 使绝对定位的div扩展父div高度

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

随机推荐