Question

我正疯狂地试图了解为什么我的CSS Counter在jQuery UI Accordion中被覆盖。

我有几个部分，并且在这些部分中，我有各种数量的Ul> LI。我将counter-reset应用于body标签，并将增量设置为LI内分配给SPAN TAG的类。

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

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

以下是所有内容的CSS：

body {
  counter-reset: lesson-counter !important;
}
.lesson-title::before {
  counter-increment: lesson-counter !important;
  content: counter(lesson-counter,decimal-leading-zero);
  font-size: 2em;
  color: darkgrey;
  vertical-align: middle;
  margin-left: -30px;
  padding-right: 20px;
}

我认为手风琴样式将在替换后加载，但是在WordPress中，我已在Customizer中添加了所有CSS，以确保最后加载。

P.S。我还把手风琴加载到了Divi（构建器）模块中，但是不确定这是造成此问题的原因。

任何建议将不胜感激。

最好的问候

Answer 1

我认为您的代码很好，但是它不能按预期工作，因为如果元素本身或data不可见的容器，CSS计数器会忽略该元素。默认情况下，您的手风琴的每个部分都是“ display：none”，但活动的除外。当您激活另一个时，当前当前状态为“ display：none”。因此，只计数活动部分，而忽略其余部分。

解决方案：

无论如何，您都需要默认保留"display:none"的每个部分，然后由手风琴活动班级display:block管理。在您的CSS文件的CSS底部下面添加我认为它将对您有用：

'ui-accordion-content-active'

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

1 个答案: