javascript - 向第一个 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 日)与当前日期的时间戳进行比较。 if current date > event-date 然后事件日期不呈现。

我们最多存储 4 个事件日期，我试图让它 self 贬值，这样我们就不必在每次事件结束时都更新它。

---

呈现的 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>

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 伪类只选择任何元素，它是其父元素的第一个子元素，而不是特定种类的第一个子元素，这就是为什么它不会为你工作。