Question

正如您在此示例中所看到的，使用的方法适用于无序列表，它的作用是为每个li项添加数字。

为什么同样的方法对div不起作用？我开放了javascript方法。

＆＃13;

ul.menu,
div.container { 
  counter-reset: item;
  list-style-type: none;
	padding: 0;
	margin: 0;
}
ul.menu li::before,
div.container::before {
	content: counter(item) " ";
	counter-increment: item;
}

＆＃13;

<ul class="menu">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<div class="container">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

＆＃13;

Answer 1

您需要定位计数器元素的子div.container div::before元素，而不是父容器。

ul.menu,
div.container { 
  counter-reset: item;
  list-style-type: none;
	padding: 0;
	margin: 0;
}
ul.menu li::before,
div.container div::before {
	content: counter(item) " ";
	counter-increment: item;
}

<ul class="menu">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<div class="container">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Answer 2

你的CSS在.container div之前添加了计数器，而不是每个div的子div。试试这个：

ul.menu li::before,
div.container div::before {
    content: counter(item) " ";
    counter-increment: item;
}

CSS：如何编号div容器？

2 个答案: