css3 last-child не работает должным образом

Question

У меня динамически генерируются списки совпадений.После каждого члена я отображаю li, который отображает VS внутри него.Однако самая последняя строка в div-совпадении не должна быть видна.Есть идеи, как я могу это сделать?HTML

<style>
    .match {
    }
    .match ul {
    }
    .match ul li {
        float: left;
        margin-right: 50px;
    } 
    .match ul li:last-child {
        display: none;
    }
</style>

  <div class="content">
    <div class="match">
      <ul>
        <li><a href="/wade-barrett/member">Wade Barrett</a></li>
        <li style="">VS</li>
      </ul>

      <ul>
        <li><a href="/shaemus/member">Shaemus</a></li>
        <li style="">VS</li>
      </ul>

      <ul>
        <li><a href="/randy-orton/member">Randy Orton</a></li>
        <li style="">VS</li>
      </ul>

      <ul>
        <li><a href="/john-cena/member">John Cena</a></li>
        <li style="">VS</li>
      </ul>

      <ul>
        <li><a href="/edge/member">Edge</a></li>
        <li style="">VS</li>
      </ul>

      <ul>
        <li><a href="/chris-jericho/member">Chris Jericho</a></li>
        <li style="">VS</li>
      </ul>

      <p class="clear"></p>
    </div>
  </div>

Answer 1

Псевдокласс :last-child должен применяться к ul, а не li, потому что вы хотите, чтобы текст VS последнего ul списка был скрыт.Применяя псевдокласс к li, вы применяете стили к последним li из каждые ul, что неверно.

Вам также следует применить атрибут class к элементам li с текстом VS, чтобы было удобнее сопоставлять его с селектором класса.

Изменить

<li style="">VS</li>

на

<li class="vs">VS</li>

И используйте это вместо текущего :last-child селектора:

.match ul:last-child li.vs {
    display: none;
}

Answer 2

Какой браузер вы используете, IE не поддерживает его. Последняя версия других браузеров делает, но я бы порекомендовал разместить на нем класс, чтобы сделать его 100%.