如何使用 css 选择 dl 元素的奇数子级

Question

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

.CSS：

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

目录：

<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>

Answer 2

尝试：

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

而不是：

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

js小提琴