如何为od偶数添加div的第一个子项的背景

Question

我有一个简单的部分现在我想添加背景颜色偶数或奇数的第一个孩子在一个div

下面是我的解决方案：jsfiddledemo

null

.elementor-accordion-item:nth-child(even) {
  background: #CCC
}

<div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title">
      1. Reumatoidalne zapalenie stawów – pielęgnacja i opieka nad pacjentem
    </div>
    <div class="content-info">
      Parkinsonizm (określany także jako zespół parkinsonowski) jest zespołem neurologicznym charakterystycznym
    </div>
  </div>
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title">
      2. Reumatoidalne zapalenie stawów – pielęgnacja i opieka nad pacjentem
    </div>
    <div class="content-info">
      Parkinsonizm (określany także jako zespół parkinsonowski) jest zespołem neurologicznym charakterystycznym
    </div>
  </div>
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title">
      3. Reumatoidalne zapalenie stawów – pielęgnacja i opieka nad pacjentem
    </div>
    <div class="content-info">
      Parkinsonizm (określany także jako zespół parkinsonowski) jest zespołem neurologicznym charakterystycznym
    </div>
  </div>
</div>

null

预期结果如下所示

[未提供图像链接]

不幸的是，我的解决方案只是为两个子项添加样式，而不是第一个表示标题的样式。

我需要做什么才能得到上面的结果？

Answer 1

不幸的是，我的解决方案只是为两个子项添加样式，而不是第一个表示标题的样式。

我们可以使用first-child选择器在nth-child()之后获取标题（first-child):

null

.elementor-accordion-item:nth-child(even) :first-child {
  background: #CCC
}

html lang-html prettyprint-override"><div class="elementor-accordion">
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title">
      1. Reumatoidalne zapalenie stawów – pielęgnacja i opieka nad pacjentem
    </div>
    <div class="content-info">
      Parkinsonizm (określany także jako zespół parkinsonowski) jest zespołem neurologicznym charakterystycznym
    </div>
  </div>
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title">
      2. Reumatoidalne zapalenie stawów – pielęgnacja i opieka nad pacjentem
    </div>
    <div class="content-info">
      Parkinsonizm (określany także jako zespół parkinsonowski) jest zespołem neurologicznym charakterystycznym
    </div>
  </div>
  <div class="elementor-accordion-item">
    <div class="elementor-tab-title">
      3. Reumatoidalne zapalenie stawów – pielęgnacja i opieka nad pacjentem
    </div>
    <div class="content-info">
      Parkinsonizm (określany także jako zespół parkinsonowski) jest zespołem neurologicznym charakterystycznym
    </div>
  </div>
</div>