Question

我在动态属性的选择器中遇到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

Here is the fiddle

Answer 1

找到了与此相关的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

Safari中的CSS重置问题

1 个答案: