Safari中的Css计数器重置问题
Safari中的Css计数器重置问题
提问于 2019-02-22 16:34:14
我在动态属性的选择器中遇到了css counter-reset的问题，但只在Safari浏览器中。
<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1" id="test" restart-numbering="true">para</p>
<p numbered="1">para</p>
<br><br><br>
<button onclick='toggle()'>
Toggle
</button>js：
function toggle() {
let el = document.querySelector('#test');
let restarting = !!el.getAttribute('restart-numbering');
if (restarting) {
el.removeAttribute('restart-numbering');
} else {
el.setAttribute('restart-numbering', true);
}
}css：
p[numbered="1"] {
counter-increment: numbered1;
}
p[numbered="1"]:before {
content: counter(numbered1)'.';
}
p[numbered="1"][restart-numbering="true"] {
counter-reset: numbered1;
}第一次加载时，段落编号会正确重置:1、2、3、4、1、2
按toggle按钮两次，这将把html带到原始状态，并得到1,2,3,4,4,5
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-27 00:36:17
找到相关的S.O.帖子：How can I force WebKit to redraw/repaint to propagate style changes?
似乎为了快速和高效，浏览器有时会在评估CSS时走捷径。使用这篇文章的答案，我们可以修改小提琴来切换容器div上的一些道具，让浏览器更深入地评估CSS：
html：
<div id="container">
<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1">para</p>
<p numbered="1" id="test" restart-numbering="true">para</p>
<p numbered="1">para</p>
</div>js：
function toggle() {
let el = document.querySelector('#test');
let restarting = !!el.getAttribute('restart-numbering');
if (restarting) {
el.removeAttribute('restart-numbering');
} else {
el.setAttribute('restart-numbering', true);
}
let ctr = document.querySelector('#container');
ctr.style.display='none';
ctr.offsetHeight; // no need to store this anywhere, the reference is enough
ctr.style.display='';
}Here's the updated fiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54822993
复制相关文章
相似问题
腾讯云开发者
