Question

我有动态生成的匹配列表。在每个成员之后，我显示一个在其中显示VS的li。然而，div匹配中的最后一个ul li应该是不可见的。我有什么想法可以做到这一点？ 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，因为您希望隐藏列表的最后ul的VS文本。通过将伪类应用于li，您将样式应用于 每个 li 的最后ul，这是不正确。

您还应该使用VS文本将class属性应用于li元素，以便与类选择器匹配更方便。

更改

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

到

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

并使用此代替当前的:last-child选择器：

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

Answer 2

您使用的是什么浏览器，IE不支持它。其他浏览器的最新版本可以，但我建议在其上放置一个类，使其100％。

css3 last-child没有按预期工作

2 个答案: