3

例如，我的 CSS 如下所示：

.page-number:after { counter-increment: page; }

当显示为内容时，例如 6 页：

.page-number:after { 
   content: 'Page ' counter(page) ' of';
}

我想存储最后一个计数器 - 6 - 并在每个项目之后打印出来。有可能这样做吗？

ul {
  list-style: none;
  counter-reset: page;
  padding: 0;
}
.page-number {
  counter-increment: page;
}
.page-number:before {
  content: 'Page ' counter(page) ' of'
}
<p>I want to use counters to print '6' after each item. eg. page 1 of 6 </p>
<ul>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
</ul>

我.page-number的位置是固定的，它将显示在所有打印的页面上。

更新：

@media print {
body { margin: 0; }
thead { counter-reset: pages; }
.page-number:before { counter-increment: pages; content: " "; }
.page-number:after { counter-increment: page; }
.page-number:after { content: "Page " counter(page) " of " counter(pages); }
}

https://codepen.io/anon/pen/OQNreQ

4

6 回答 6

0

尝试这个

.page-number:after
    {
       counter-increment: page;
       content: counter(page) "/" counter(pages);
    }
于 2018-09-20T10:20:39.350 回答
0

如果您想如下所示显示您的 html；1. 测试 2. 测试 3. 测试

你可以这样做：

<div class="test">
  <h3>List Item</h3>
  <h3>List Item</h3>
  <h3>List Item</h3>
</div>
.test {
  counter-reset: page;
}
.test h3:before {
  counter-increment: page;
  content: page". ";
}
于 2018-02-05T07:31:20.653 回答
0

这是一个概念证明，表明这可以用纯 CSS 完成：

1) 在存储总页数的页列表后添加一个元素。

2) 利用CSS element() 函数- 目前是图像模块第 4 级规范中的草案 - 但从版本 4 开始受 Firefox 支持- 将其内容作为背景复制到其他项目。

来自MDN：

element() CSS 函数定义从任意 HTML 元素生成的值。此图像是实时图像，这意味着如果 HTML 元素发生更改，使用结果值的 CSS 属性会自动更新。

演示片段（在 Firefox 中查看）

ul {
  list-style: none;
  counter-reset: page;
}
.page-number {
  counter-increment: page;
  padding-right: 0.3em;
  float: left;
  clear: left;
}
.page-number:before {
  content: 'Page ' counter(page) ' of'
}
.page-number ~ .page-number {
  background:-moz-element(#counterTotal) no-repeat right center;
  padding-right: 0.8em;
}
.copy:before {
  content: counter(page);
}
<ul>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
</ul>
<span id="counterTotal" class="copy"></span>

注意：我将这个答案作为概念证明发布，以表明理论上这实际上可以使用纯 CSS 来完成（需要添加一个额外的元素）。话虽如此，我当然会推荐在这里使用javascript 解决方案。

于 2018-02-05T10:45:44.037 回答
0

我想你想要这样的东西：

body {
  counter-reset: page;
}

.page-number:after { 
  counter-increment: page;
  content: counter(page);
  visibility: hidden;
}

.page-number:last-child:after { 
  visibility: visible;
}
<div id="wrap">
  <div class="page-number">test</div>
  <div class="page-number">test</div>
  <div class="page-number">test</div>
  <div class="page-number">test</div>
  <div class="page-number">test</div>
  <div class="page-number">test</div>
</div>

您必须打印计数器，否则它不会增加。所以我改变了能见度。

于 2018-02-05T07:44:26.003 回答
0

我最近不得不建立类似的东西。我找到了一个蛮力解决方案。

使用 SASS：

.page {
  counter-increment: page;

  @for $i from 1 through 100 {
    &:nth-last-child(#{$i})::after,
    &:nth-last-child(#{$i}) ~ &::after {
      content: "Page " counter(page) " of #{$i}.";
    } 
  }
}

可以想象，它输出了相当多的 CSS：

.page {
  counter-increment: page;
}
.page:nth-last-child(1)::after, .page:nth-last-child(1) ~ .page::after {
  content: "Page " counter(page) " of 1.";
}
.page:nth-last-child(2)::after, .page:nth-last-child(2) ~ .page::after {
  content: "Page " counter(page) " of 2.";
}
.page:nth-last-child(3)::after, .page:nth-last-child(3) ~ .page::after {
  content: "Page " counter(page) " of 3.";
}
/* etc… */
于 2019-02-04T13:39:22.833 回答
-1

您可以使用“CSS 计数器”

例如

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>Using CSS Counters:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>
来源 https://www.w3schools.com/css/css_counters.asp

于 2018-02-05T08:13:35.537 回答