html - 重置 CSS :nth-of-type counter

Question

我正在使用 WP 事件插件，它以下列格式创建事件列表:-

.event-list .event {
    float: left;
    width: 30%;
    margin-left: 0;
    background: #eee;
}

span.month {
  width: 100%;
  border-bottom: solid 1px black;
  display: block;
  clear: both;
}

.event-list div.event:nth-of-type(3n){
margin-left:5%;
}

.event-list div.event:nth-of-type(3n+1){
margin-left: 0;
clear: both;
}

.event-list div.event:nth-of-type(3n+2){
margin-left:5%;
}

<div class="event-list">
<span class="month">January</span>
<div class="event">Event 1</div>
<div class="event">Event 2</div>
<div class="event">Event 3</div>
<div class="event">Event 4</div>
<span class="month">February</span>
<div class="event">Event 5</div>
<div class="event">Event 6</div>
<div class="event">Event 7</div>
<div class="event">Event 8</div>
<div class="event">Event 9</div>
<div class="event">Event 10</div>
</div>

我希望第 n 个类型的计数器在每个 span 元素之后重置，以便无论当月的事件数量如何，列都可以正常工作。我尝试过使用波浪号 ~ 选择器(如此处建议的那样 Excluding an element from nth-child pattern http://jsfiddle.net/jWxb6/11/ )，但我终生无法让它发挥作用。如果可以的话，我想在不使用 JS/JQuery 的情况下做到这一点，但如果没有纯 CSS 解决方案，那也是一种选择。

Answer 1

为什么不考虑采用更简单的方法来实现这一目标。这是使用 flexbox 的想法，不需要使用复杂的选择器，因为你想要做的事情在你的实际 HTML 结构中是不可能的。

.event-list {
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.event-list .event {
  width: 30%;
  margin-left: 0;
  background: #eee;
}

span.month {
  width: 100%;
  border-bottom: solid 1px black;
}

<div class="event-list">
  <span class="month">January</span>
  <div class="event">Event 1</div>
  <div class="event">Event 2</div>
  <div class="event">Event 3</div>
  <div class="event">Event 4</div>
  <span class="month">February</span>
  <div class="event">Event 5</div>
  <div class="event">Event 6</div>
  <div class="event">Event 7</div>
  <div class="event">Event 8</div>
  <div class="event">Event 9</div>
  <div class="event">Event 10</div>
</div>