用CSS计数器显示当前步骤

说你有五个按钮。每个按钮是一个步骤。如果单击第四个按钮，则在第5步中，您要显示。

这种计数和显示可能会被硬编码，但这并不有趣。 JavaScript也可以完成这项工作。但是CSS？嗯。可以吗？ CSS有计数器，因此我们当然可以计算按钮的数量。但是，我们如何仅计算到某个按钮？原来可以做到。

html

不必是按钮；它只需要是我们可以计算的一些兄弟姐妹。但是我们将继续在这里使用按钮：

 <div>

  <button>商店</button>
  <button>购物车</button>
  运输
  <button>结帐</button>
  谢谢

  <div> </div>

</div>

空的.message div将在其中输出带有CSS内容的步骤消息。

CSS

诀窍是我们实际上将使用三个计数器：

1. 所有按钮的总数
2. 当前步骤的计数
3. 当前步骤之后剩余的步骤数量

.steps {
  反序： 
    CurrentStep 0 
    剩余0 
    TotalStep 0;
}

现在让我们实际上进行计数。计算所有按钮很简单：

按钮 {
  反插入：TotalStep;
}

接下来，我们需要一件事要计算，也可以计算按钮。我们可以使用唯一目的的伪元素是计数按钮：

按钮:: {
  内容： ””;
  反插入：CurrentStep;
}

诀窍是停止在活动元素之后的所有元素上计数伪元素。如果我们使用的是这样的活跃类：

 button.Active〜按钮:: {
  /*防止CurrentStep逐渐增加！ */
  抗议：剩余；
}

我们正在计算其余部分，这也可能有用，但是由于我们只是在增加其余部分，这意味着我们不计算CurrentStep计数器。幻想，幻想。

然后，我们可以使用计数器输出我们的消息传递：

消息:: {
  内容：“步骤：”计数器（CurrentStep）“ /”计数器（TotalStep）;
}

这里是！

那里有一点JavaScript，因此您可以在按钮上移动活动状态，但是计数和消息是所有CSS。

以上是用CSS计数器显示当前步骤的详细内容。更多信息请关注PHP中文网其他相关文章！