html - 瞄准所有除了 CSS 中的一个元素

Question

所以我用<ul>元素构建了这个菜单

<ul>
  <li class="item">
    <a>Item 1</a>
  </li>
  <li class="item">
    <a>Item 2</a>
  </li>
  <li class="item">
    <a>Item 3</a>
  </li>
  <li class="item mobile-item">
    <a>Item 4</a>
  </li>
</ul>

菜单看起来像这样

项目 1 / 项目 2 / 项目 3

最后一个元素隐藏在类中.mobile-item

在移动设备上，菜单变成手风琴，然后只.mobile-item显示

我现在的问题是结果是：

第 1 项 / 第 2 项 / 第 3 项 /

最后一类item在其右侧有边框

我将如何定位最后一个item班级，而.mobile-item班级列表中没有

标签： htmlcss

Answer 1

:nth-last-child(2)在您似乎想要倒数第二个孩子的这种情况下使用有效：

li.item:nth-last-child(2) {
  color: red;
}
  

<ul>
  <li class="item">
    <a>Item 1</a>
  </li>
  <li class="item">
    <a>Item 2</a>
  </li>
  <li class="item">
    <a>Item 3</a>
  </li>
  <li class="item mobile-item">
    <a>Item 4</a>
  </li>
</ul>