Question

以下是我要使用的代码，

<template name="App_ViewTasks">
    <body  class="skin-blue sidebar-mini" style="height: auto;">
      <div class="content-wrapper">
        <section class="content">
          <div class="row">
            {{#each tasks}}
                <div class="col-xs-12">
                    <div class="box box-danger">
                        <div class="box-header">
                            <h3 class="box-title">
                                <span class="label label-default css-serial"> </span>
                            </h3>
                        </div>
                    </div>                      
                </div>
            {{/each}}
          </div>
        </section>  
      </div>
    </body>
</template>

我想在span标签内生成一个自动序列号，如下所示。

我正在尝试使用带有以下代码的css来实现它。

.css-serial {
  counter-reset: serial-number;  /* Set the serial number counter to 0 */
}
.css-serial {
  counter-increment: serial-number;  /* Increment the serial number counter */
  content: counter(serial-number);  /* Display the counter */
}

我错过了元素映射，那就是它！任何帮助都会深深感激。

注意：没有必要使用css来实现这一点，你可能会建议更好的实现。

Answer 1

您与解决方案非常接近。

content仅用于:before和:after伪元素。

counter-reset正在重置每个范围，因此我已将:first-of-type添加到选择器。

＆＃13;

.content-wrapper .content .row .col-xs-12:first-of-type {
  counter-reset: serial-number;
  /* Set the serial number counter to 0 */
}

.css-serial {
  counter-increment: serial-number;
  /* Increment the serial number counter */
}

.css-serial:after {
  content: counter(serial-number);
  /* Display the counter */
}

＆＃13;

<div class="content-wrapper">
  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-danger">
          <div class="box-header">
            <h3 class="box-title">
              <span class="label label-default css-serial"> </span>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="box box-danger">
          <div class="box-header">
            <h3 class="box-title">
              <span class="label label-default css-serial"> </span>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="box box-danger">
          <div class="box-header">
            <h3 class="box-title">
              <span class="label label-default css-serial"> </span>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="box box-danger">
          <div class="box-header">
            <h3 class="box-title">
              <span class="label label-default css-serial"> </span>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="box box-danger">
          <div class="box-header">
            <h3 class="box-title">
              <span class="label label-default css-serial"> </span>
            </h3>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

＆＃13;

修改

基于更新问题：您需要更改counter-reset的选择器。从您的HTML，我已将其更改为.content-wrapper .content .row .col-xs-12:first-of-type。如果你将一个类添加到外部div以获得更漂亮的css会更好。

如何在＆＃39; span＆＃39;内显示序列号嵌套层次结构

1 个答案:

修改