javascript-将类添加到第一个div以设置内部div的样式？

我有一个动态生成的元素列表,除了第一个元素以外,所有元素的样式都相同.如果第一个没有渲染,我希望第二个(现在是第一个)具有第一个的样式.

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

解决方法:

嗯,根据您的更新,我相信您希望将: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伪类仅选择作为其父项的第一个子项元素的任何元素,而不是特定种类的第一个子项,这就是为什么它对您不起作用的原因.