html - 如何用CSS选择dl元素的奇数子元素？

Question

我尝试将背景设置为 dl 元素中存在的 dd 和 dt 元素。我使用此选择器但不起作用。请指教。

CSS:

     dl.dl-horizontal dt:odd {
   background: rgba(45, 177, 227, 0.34);
}

HTML:

<dl class="dl-horizontal">
    <dt>
        @Html.DisplayNameFor(model => model.HistoricalName)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.HistoricalName)
    </dd>

    <dt>
        @Html.DisplayNameFor(model => model.Address)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Address)
    </dd>

    <dt>
        @Html.DisplayNameFor(model => model.Title)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Title)
    </dd>

    <dt>
        @Html.DisplayNameFor(model => model.InsertDate)
    </dt>

           <dt>
        @Html.DisplayNameFor(model => model.LocationX)
    </dt>

           <dd>
        @Html.DisplayFor(model => model.VisitorEn)
  </dd>
</dl>

Answer 1

你可以使用:nth-of-type(odd)

dl.dl-horizontal dt:nth-of-type(odd) {
   background: blue;
}

<dl class="dl-horizontal">
  <dt>Lorem ipsum dolor.</dt>
  <dd>Lorem ipsum dolor.</dd>
  <dt>Lorem ipsum dolor.</dt>
  <dd>Lorem ipsum dolor.</dd>
  <dt>Lorem ipsum dolor.</dt>
  <dd>Lorem ipsum dolor.</dd>
  <dt>Lorem ipsum dolor.</dt>
  <dd>Lorem ipsum dolor.</dd>
</dl>