问题标签 [css-counter]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
486 浏览

javascript - 如何增加十六进制数

我正在尝试在 javascript 中实现 css 计数器。到目前为止,我已经看到大多数计数器都有一些初始的十六进制值,并相应地增加 1。对于循环计数器,它会重复自身。但 cjk-decimal 也是数字计数器的类型,其值低于十六进制值。

那么有没有办法在javascript中将“\3007”增加到“\4E00”到n,以按顺序产生相同的字符。

提前致谢。

0 投票
1 回答
5127 浏览

html - CSS将前导零添加到有序列表自定义计数器

是)我有的:

带有自定义计数器的有序列表:

我需要的:

任何编号小于 10 的列表项之前的前导零。

即 01、02、03、04、05、06、07、08、09、10。

我的问题:

如何通过 CSS 实现所需的前导零?

0 投票
1 回答
138 浏览

javascript - 为什么我们不能像其他 htmlelement 一样访问元素

我试图弄清楚为什么 javascript 无法访问伪元素。有人说这是因为伪元素不是dom的一部分。这是真的吗?那么为什么我们能够访问它的样式属性。

对于给定的 html 元素。

document.getElementById("1"); 给了我们一个 HtmlLielement,它派生自 HtmlElement --> Element --> Node Is 伪元素不是从上面的类层次结构继承的,因为我无法在列表项 2 之前访问伪元素的计数器值。

有人可以告诉我无法从 JavaScript 访问伪元素的原因吗?

0 投票
1 回答
317 浏览

css - CSS Counter 在 Chrome 中使用 slidetoggle 给出错误的编号

说明:- 计数器在滑动切换时有争议地递增。它给了 ol 之外的 li 有争议的数字。问题出现在 chrome 中,并且在 Mozilla 中运行良好。那么解决方案是什么?
我在底部附加了输出文件。

jQuery

CSS:-

OTPUT 看起来像 输出 -2

JS_Fiddle:- https://jsfiddle.net/tushar115/f6zvu8w5/10/

0 投票
1 回答
249 浏览

css - 纯 CSS 按增量旋转

是否可以使用纯 CSS 将连续元素旋转一定量(比如 5 度)。

我尝试了以下方法:

HTML

CSS

但无济于事。

每个 MDN 的 CSS 计数器:https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

0 投票
1 回答
946 浏览

html - 父母的反增量,但孩子的内容

我在 css 'counter-increment' 和 'counter-reset' 属性上有点挣扎。我已经让它与列表完美配合,但是当涉及到标题标签时,对我来说事情变得不太清楚了。

想象一下以下布局:

我希望对标题标签进行编号(包括嵌套计数!)但由于标题标签本身没有嵌入,但他们的父母我无法让它正常工作。所以这就是我到目前为止得到的(基于逻辑,但不是最接近我想要实现的解决方案!我尝试了我能想到的所有可能的组合)

我将不胜感激任何解决方案的方向(如果存在)。

附言。我应该提到我主要在 Chrome 上测试这个,但我在其他浏览器上也发现了这个。

编辑

我正在寻找的格式是“1.1”、“1.2”、“1.2.1”等。每个嵌套部分都应该附加另一个计数器层,尽管我可以在不分层(单深度)的情况下让它工作,动态多分层显然很难实现。

0 投票
1 回答
1622 浏览

css - CSS计数器不递增

我的示例中的 CSS 计数器不会增加,尽管我已指定它这样做。我在这里阅读了一些关于可能导致这种情况的元素的嵌套级别的问题,但在我的情况下,所有元素都处于同一级别。

MWE

结果

在此处输入图像描述

标题“第二标题”的计数器需要为“2”。在 CSS 中交换标签counter-reset下的顺序body会导致相同的问题,但与受影响的标题相反。

CodePen 链接

0 投票
1 回答
102 浏览

css - 在自定义元素的 :host 声明中使用 CSS 计数器重置

[运行代码片段]

我希望我的 DIV 数字显示从0开始,
所以我想使用以下命令在 -1 开始计数器:counter-reset : square -1;

然而,这个设置在使用时会被忽略:host

counter-reset当所有 DIV 都包装在一个额外的 parentDIV 中时工作正常(counter-reset在该父 DIV 上)
但我喜欢使用这种解决方法,因为它在我的最终应用程序中需要更多代码。

有没有可能在中counter-reset使用:host???


组件

0 投票
1 回答
93 浏览

jquery - jQuery ui 手风琴子 css-counter 被覆盖

我正在疯狂地试图理解为什么我的 CSS 计数器在 jQuery UI Accordion 中被覆盖。

我有部分,在这些部分中,我有不同数量的 Ul > LI。我将计数器重置应用于主体标签,并将增量设置为分配给 LI 内的 SPAN TAG 的类。

当我展开这些部分时,我看到数字在增加,但是当动画完成时,每个部分中的数字从 1 开始。

显然需要在此问题中放置大量代码,因此最好将您简单地指向相关页面:https ://zindolabs.com/course/create-your-signature-system /

这是所有内容的CSS:

我认为手风琴样式是在我的覆盖之后加载的,但是在 WordPress 中,我已经在定制器中添加了所有 CSS 以确保它最后加载。

PS我还在Divi(构建器)模块中加载了手风琴,但不确定这是否归因于问题。

任何意见,将不胜感激。

此致

0 投票
1 回答
547 浏览

css - 带有计数器标识符“list-item”的奇怪浏览器行为

TL;博士

不要命名你的柜台list-item


问题:

CSS 计数器比较容易理解、有据可查并且有很好的浏览器支持

但是,我遇到了他们不理解的意外行为,我想知道为什么会发生这种情况。可能只是浏览器中的错误......</p>

在以下示例中,我们可以看到计数器按预期工作:

但是将计数器的标识符更改为 时list-item,我们可以看到它在不同浏览器中的行为不同:

虽然在 Chrome 和 Firefox 中它仍然按预期工作,但在 Edge 和 Internet Explorer 11 中它从 2 开始计数并以 2 递增,在 Safari 中它从 0 开始计数但仍以 1 递增。

例如,当注释掉该counter-reset属性时,它变得更加奇怪。然后 Safari 正确计数,但 Chrome 从 2 开始计数。当注释掉counter-incrementChrome 和 IE/Edge 时正确计数,尽管它们实际上应该显示 0。

在玩这个时,在不同的浏览器中还有更多奇怪的行为,而且只有当标识符是list-item.

当我最初遇到这个问题时,我没有进一步调查的第一个假设是它至少与display财产价值有关list-item。正如 MDN 所说:

list-item 关键字使元素生成一个 ::marker 伪元素,其内容由其列表样式属性(例如项目符号点)指定,以及其自身内容的指定类型的主体框。

请参阅:https ://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem

但由于我找不到任何进一步的文档,我想知道不同的供应商如何实现这样的类似错误......</p>

问题:

我真的很想念这里吗?规范中是否有标识符的保留字?有什么特别之处list-item吗?

在 W3C 规范中,我找不到任何关于它的信息:

https://www.w3.org/wiki/CSS/Properties/counter-increment

https://www.w3.org/wiki/CSS/Properties/counter-reset


附加信息:

为了完整起见,这里是使用的版本:

  • Chrome 70.0.3538.110 MacOS Mojave 10.14.1
  • 铬 70.0.3538.110 Windows 10 17134.407
  • 边缘 17.17134 Windows 10 17134.407
  • 火狐 63.0.3 MacOS Mojave 10.14.1
  • 火狐 63.0.3 Windows 10 17134.407
  • Internet Explorer 11.407.17134.0 Windows 10 17134.407
  • Safari 12.0.1 MacOS Mojave 10.14.1