如何将最后的计数器值存储在CSS中,并显示为HTML中的内容?

By simon at 2018-02-07 • 0人收藏 • 53人看过

例如,我的CSS看起来像这样:

.page-number:after { counter-increment: page; }
当显示为内容时,例如6页:
.page-number:after { 
   content: 'Page ' counter(page) ' of';
}
我想存放拉斯维加斯t柜台 - 这是6 - 打印出来后,每个 项目。这有可能吗?
ul {
  list-style: none;
  counter-reset: page;
  padding: 0;
}
.page-number {
  counter-increment: page;
}
.page-number:before {
  content: 'Page ' counter(page) ' of'
}

I want to use counters to print '6' after each item. eg. page 1 of 6

<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 个回复 | 最后更新于 2018-02-07
2018-02-07   #1

如果你想显示你的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-07   #2

我想你想要这样的东西:

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-07   #3

你可以使用“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>

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

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

2018-02-07   #4

这是一个概念证明,表明这可以用纯CSS完成: 1)在存储的页面列表之后添加一个元素总页数。 2)利用[CSS元素()函数](https://drafts.c​​sswg.org/css- 图像-4 /#元素符号)\ - 目前在图像模块级别4草稿 规范 - 但[由Firefox支持](https://caniuse.com/#feat=css-element- 功能)从版本4开始 - 将其内容作为背景复制到另一个 项目。 从[MDN](https://developer.mozilla.org/en-US/docS /网络/ CSS /元):

element()CSS函数定义从任意HTML生成的值 元件。这个图像是活的,这意味着如果HTML元素被改变, 使用结果值的CSS属性会自动更新。

演示snippet(在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>


注:我发布这个答案作为概念的证明来显示theoretically 这实际上可以用纯CSS来完成(增加一个额外的代价) 元件)。话虽如此,我一定会记得ommend使用一个JavaScript 解决方案这里。

登录后方可回帖

Loading...