html - 使用 index 将 CSS 背景图像与 line-item 匹配

Question

以下结构为集合生成背景图像

.accordion ul li:nth-child(1) { background-image: url("1.jpg"); }
.accordion ul li:nth-child(2) { background-image: url("2.jpg"); }
.accordion ul li:nth-child(3) { background-image: url("3.jpg"); }
.accordion ul li:nth-child(4) { background-image: url("4.jpg"); }

然后打算如下布置

<div class="accordion">
  <ul>
    <li>
      <div> <a href="#"><p>Text 1</p></a> </div>
    </li>
    <li>
      <div> <a href="#"><p>Text 2</p></a> </div>
    </li>
  </ul>
</div>

然而，这依赖于项目按照生成的第 n 个孩子的顺序的前提。第 n 个子值是由数据库查询结果的索引生成的。

但是，如果要生成多个手风琴，请说

<div class="accordion">
  <ul>
    <li>
      <div> <a href="#"><p>Text 1</p></a> </div>
    </li>
    <li>
      <div> <a href="#"><p>Text 2</p></a> </div>
    </li>
  </ul>
</div>
<div class="accordion">
  <ul>
    <li>
      <div> <a href="#"><p>Text 3</p></a> </div>
    </li>
    <li>
      <div> <a href="#"><p>Text 4</p></a> </div>
    </li>
  </ul>
</div>

现在 div 仅使用前 2 个 nth-children 背景图像运行，因为内部计数器已为 div 重新设置。

第 n 个子项的索引如何与相关行项相关联？

标签： htmlcss