Html 使用索引将CSS背景图像与行项目匹配

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

.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个子级背景图像中运行，因为为div重新设置了内部计数器

---

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

简短回答：你不能，Nth-Calthor（）只考虑兄弟姐妹，没有CSS选择器考虑非兄弟元素，所以唯一的解决方案是为每个手风琴建立不同的类，是吗？或者在生成代码时简单地使用内联样式。您可以在后端右侧轻松跟踪索引。我认为你应该在回答中概述这些“前进的道路”。同时将

nth-child（）

选择器设置为

。accordion