css - 如何使用动态加载的数据创建不同颜色的行？

Question

我正在创建一个位置列表，我需要每个位置都有不同的背景颜色。该列表是从我们的 SQL Server 数据库动态加载的，它是使用 Bootstrap Rows 构建的。如何获得交替颜色？

我已经尝试为行赋予“第 n 个子级”样式，但是因为每一行生成一个，所以无论生成多少行，它都将其视为第一行。我什至尝试创建一个表格，但它的格式或样式不正确。

可以在下面找到生成上图中列表的代码:

 @foreach (var hospital in Model)
    {
        <button class="top50accordion">@Html.DisplayFor(modelItem => hospital.StatesAbre[hospital.State])</button>
        <div class="panel">
            @foreach (var subhospital in hospital.NameCityCenterId)
            {
                string[] hosp = @subhospital.Split('+');
                <div class="row">
                    <div class="col-8 col-sm-8 col-md-8 col-lg-6" style="margin: 5px 0;"><a href="~/ResearchCenter?id=@hosp[2]&alias=@hosp[0]" style="color:#0A5D66;font-weight:bold;" target="_blank">@hosp[0]</a></div>
                    <div class="text-right col-4 col-sm-4 col-md-4 col-lg-5" style="margin: 5px 0;">@hosp[1]</div>
                </div>
                <div class="col-lg-1"></div>

            }

        </div>
    }

Answer 1

第 n 个 child 应该使用 .panel .row 作为选择器。

.panel .row:nth-child(even){
 background-color: lightblue;
}

<div class="panel">
  <div class="row">a</div>
  <div class="row">b</div>
  <div class="row">c</div>
  <div class="row">d</div>
</div>
<hr>
<div class="panel">
  <div class="row">a</div>
  <div class="row">b</div>
  <div class="row">c</div>
  <div class="row">d</div>
</div>