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)

＆＃13;

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

＆＃13;

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

＆＃13;

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);
    }

<强> jsFiddle

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

2 个答案: