将类添加到第一个div以样式化内部div？

Question

我有一个动态生成的元素列表，除了第一个之外，其余所有元素都采用相同的样式。如果第一个元素未呈现，则我希望第二个（现在是第一个）具有第一个元素的样式。

  <div class="container">
    <a><div>first</div></a>
    <a><div>second</div></a>
    <a><div>third</div></a>
    <a><div>fourth</div></a>
    </div>

我尝试只使用 CSS 来完成这个操作，但是效果不如预期。

.container a:first-child div{
background:red;
}

我还尝试通过jQuery向第一个div添加类，但它甚至都没有添加我的类：

$('.container a:first div').addClass('aaaa');

由于这两种方法都似乎行不通，我该如何实现我正在尝试做的事情？主要是想修复我的CSS答案，但如果不可能，jQuery也可以。

---

用例：

我正在构建一种类似于时间表档案的东西，但由于我们的框架不支持日历小部件，所以我们填充数据，然后使用 Date.parse()/moment.js以获取时间戳。 然后，我们将日期（例如：2016年6月1日）与当前日期的时间戳进行比较。 如果当前日期>事件日期，则不会呈现事件日期。

我们最多存储4个事件日期，我正在尝试使其自我贬值，以便我们无需每次完成事件时都更新它。

---

呈现的HTML示例：

<div class="container events" style="margin-top: 28px;">
  <h3>Upcoming Meetups</h3>
  <div class="hugs-post-instructions">blah blah<br>Click on each button to be taken to the registration page.</div>

  <a href="#">
    <div class="square-button">Next Meetup: May 19, 2016
    </div>
  </a>

  <a href="#">
    <div class="square-button">Upcoming Meetup: September 22, 2016
    </div>
  </a>

  <a href="#">
    <div class="square-button">Upcoming Meetup: December 1, 2016
    </div>
  </a>
</div>

- knocked loose

---

a:first-child 应该可以工作，顺便问一下，你为什么要把 div 包在 a 里面？ - Selvakumar Arumugam

“如果第一个无法呈现”是什么意思？ - j08691

一个展示部分机制的栈代码片段可能会有所帮助。 - Sebastian Simon

那么，如果是这种情况，.container a:first-child div应该可以工作，但你说它不起作用，那么显然还有其他问题。 - Paulie_D

@ether - 在所有渲染完成后，如果您拥有上述的HTML和CSS，则第一个div将以红色突出显示。 - Nikhil Aggarwal

Answer 1

根据您的更新，我相信您想要使用:nth-of-type伪类作为您的选择器：

.container a:nth-of-type(1) div {
  background: red;
}

<div class="container events" style="margin-top: 28px;">
  <h3>Upcoming Meetups</h3>
  <div class="hugs-post-instructions">blah blah
    <br>Click on each button to be taken to the registration page.</div>

  <a href="#">
    <div class="square-button">Next Meetup: May 19, 2016
    </div>
  </a>

  <a href="#">
    <div class="square-button">Upcoming Meetup: September 22, 2016
    </div>
  </a>

  <a href="#">
    <div class="square-button">Upcoming Meetup: December 1, 2016
    </div>
  </a>
</div>

:first-child 伪类选择器只会选择其父元素的第一个子元素，而不是某种特定类型的第一个子元素，这就是为什么它对您无效的原因。

- j08691

---

还有 :first-of-type。 - Sebastian Simon

喔！就是它了！感谢你的所有帮助！ - knocked loose

Answer 2

或者您可以通过为所有 div 添加红色背景，然后针对所有 相邻兄弟 删除它来突出显示第一个 div：

.container a div {
    background:red;
}
.container a + a div {
    background:inherit;
}

<div class="container events" style="margin-top: 28px;">
  <h3>Upcoming Meetups</h3>
  <div class="hugs-post-instructions">blah blah<br>Click on each button to be taken to the registration page.</div>

  <a href="#">
    <div class="square-button">Next Meetup: May 19, 2016
    </div>
  </a>

  <a href="#">
    <div class="square-button">Upcoming Meetup: September 22, 2016
    </div>
  </a>

  <a href="#">
    <div class="square-button">Upcoming Meetup: December 1, 2016
    </div>
  </a>
</div>

- Moob