我想使用jQuery 在" " 上设置CSS counter-increment属性.demo:before.
问题是jQuery无法访问伪元素.另一个SO答案(我现在似乎无法找到)建议设置数据属性,然后在CSS中使用该值,但这也不起作用.这是可以实现的吗？
简化示例:http://jsfiddle.net/4h7hk8td/
HTML:
<ul class="demo">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
JS:
// 1) User Sets Unit Size
var myUnit = 100;
// 2) Unit size is saved via data attribute
$('.demo li').attr('data-unit', myUnit);
CSS:
.demo {
counter-reset: list;
}
.demo li:before {
/* 3) CSS gets data attribute and applies as the increment. Not working :( */
counter-increment: list attr(data-unit);
content: counter(list);
}
在我的html代码中,我定义了以下列表:
<p class="list">first.</p>
<p class="list">second.</p>
现在,css我有:
.list {
display: table;
}
.list:before {
display: table-cell;
counter-increment: counter;
content: counter(counter) '.';
padding-right: 5px;
}
并且页面上的结果是:
1. first
1. second
如何将第二个数字增加到2的值？
我有一个问题,我的计数器,我用来获取数字在h3,h4和h5之前,就像一个列表.只有当标签具有class ="count"时才能看到该数字,并且只有这样才能对下面的标题进行计数器重置.
当我跳过显示h3上的数字时,h4s计数器变得混乱upp,同样跳过h4.有谁知道为什么？
body {
counter-reset: h3
}
h3 {
counter-reset: h4
}
h4 {
counter-reset: h5
}
h3.count:before {
counter-increment: h3;
content: counter(h3) ". "
}
h4.count:before {
counter-increment: h4;
content: counter(h3) "." counter(h4) ". "
}
h5.count:before {
counter-increment: h5;
content: counter(h3) "." counter(h4) "." counter(h5) ". "
}
h3:before,
h4:before,
h5:before {
content: "";
counter-increment: none
}<h3 class="count">: should be : 1</h3>
<h4 class="count">: should be : 1.1</h4>
<h5 class="count">: should be : 1.1.1</h5>
<h5>No counter</h5> …我尝试制作一个图像滑块，当鼠标悬停在一个点上时，它将显示图片。我也尝试通过使用在图像之间切换z-index，但没有任何移动。
.slider {
counter-reset: index 1000;
}
.slider input[name='slide_switch']:hover+label+img {
counter-increment: index;
z-index: counter(index);
}我最近一直在使用CSS计数器，我想知道是否有可能将它们放在CSS动画循环中并增加它们。我的代码很简单：
div {
animation-name: anim;
animation-duration: 0.5s;
animation-iteration-count: 10;
animation-fill-mode: forwards;
}
div:before {
counter-increment: variable;
content: counter(variable);
}
@keyframes anim {
100% { counter-increment: variable; }
}<div></div>您可以看到该数字上升了，但随后又回到了1。我认为这样做animation-fill-mode: forwards可以防止这种情况的发生，但我想不是。
我是在做错什么，还是CSS计数器无法做到这一点？
我正在为网站编写自定义主题，因此无法使用 Javascript。我想将一些数字转换为罗马数字。
我试过这个：
.score:before {
counter-reset: mycounter attr(score number, 0);
content: counter(mycounter, upper-roman) " ";
} <p><span class="score" score="11">points</span></p>唉，似乎“attr(score number, 0)”总是0。这不是因为回退，因为当我将回退数字更改为42时，结果仍然是0。这在代码中的其他地方不是问题，因为当我attr(...)用 42 这样的数字替换时它工作得很好。
那么为什么这段代码没有显示出它应该显示的内容呢？
我猜这是不可能的，但想知道是否有人尝试使用CSS计数器成功生成序数（第一，第二，第三等）？
显然，这在JavaScript中是微不足道的，但是希望找到一种仅样式的解决方案。
我正在尝试使用 CSS 计数器来创建章节编号。正如您在下面的示例中看到的那样，如果我处理容器内的类，它可以正常工作，但是当我尝试在 div 内的子项中使用它时，它就不起作用了。知道如何纠正这种行为吗？（我需要使用这种结构）
.itemsContainer {
counter-reset: section;
}
.t1 {
counter-reset: subsection;
}
.t1:before {
counter-increment: section;
content: counter(section) ". ";
}
.t2:before {
counter-increment: subsection;
content: counter(section) "."counter(subsection) " ";
}<h3>Direct access to class</h3>
<div class="itemsContainer">
<p class="t1"></p>
<p class="t2"></p>
<p class="t2"></p>
</div>
<h3>Inside div</h3>
<div class="itemsContainer">
<div class="item">
<p class="t1"></p>
</div>
<div class="item">
<p class="t2"></p>
</div>
<div class="item">
<p class="t2"></p>
</div>
</div>演示：https : //jsfiddle.net/jacobgoh101/uqrkaodc/3/
<ol>
<li>a</li>
</ol>
<ul>
<li>b</li>
</ul>
<ol>
<li>c</li>
<li>d</li>
<li>e</li>
</ol>
ol li {
counter-increment: list-0;
list-style: none;
}
ol li:before {
content: counter(list-0, decimal) '. ';
}
当前结果
1 a
• b
1 c
2 d
3 e
有没有办法在下面实现这个结果？
预期结果
1 a
• b
2 c
3 d
4 e
（上下文：尝试使嵌套列表与 QuillJS 一起工作。https ://github.com/quilljs/quill/issues/979）
更新：
由于QuillJS库的限制，我不是真的能够添加start="2"到ol或更改HTML结构。
如果可能的话，我想我需要一个纯 CSS 解决方案。
Firefox 桌面 v84 更新是否破坏了 CSS 计数器重置：功能？Chrome 和 Edge 渲染正常，但 Firefox 不行 有人能确认吗？
下面是我正在使用的代码示例：
body
{
counter-reset: section subsection;
}
p.section
{
counter-reset: subsection;
}
p.section:before
{
counter-increment: section;
content: "" counter(section) ".0" ": ";
counter-reset: subsection;
}
p.subsection:before
{
counter-increment: subsection;
content: "" counter(section) "." counter(subsection) ": ";
}<p class="section">Paragraph should be 1.0</p>
<p class="section">Paragraph should be 2.0</p>
<p class="subsection">Paragraph should be 2.1</p>
<p class="subsection">Paragraph should be 2.2</p>
<p class="section">Paragraph should be 3.0</p>
<p class="section">Paragraph should be 4.0</p>
<p …css ×10
css-counter ×10
html ×6
css3 ×2
counter ×1
css-content ×1
css-tables ×1
firefox ×1
javascript ×1
jquery ×1
list ×1
z-index ×1