将 CSS 应用于除最后一个元素之外的所有元素？

【问题标题】：Apply CSS to all but last element?将 CSS 应用于除最后一个元素之外的所有元素？
【发布时间】：2016-03-28 18:22:20
【问题描述】：

我有以下 html：

<ul class="menu">
  <li><a>list item 1</a></li>
  <li><a>list item 2</a></li>
  ...
  <li><a>list item 5</a></li>
</ul>

我想为除最后一个之外的所有<a> 元素应用边框。

我一直在尝试这个：

.menu a {   
  border-right: 1px dotted #ccc;
}
.menu a:last-of-type {
  border-right: none;
}

但我最终在任何元素上都没有边框，我猜是因为<a> 在每种情况下都是最后一个类型。

我该怎么做？如果可能的话，我宁愿只使用 CSS，如果可能的话，我希望能兼容 IE9。

【问题讨论】：

将选择器更改为.menu li:last-of-type a Demo：jsfiddle.net/ybou5hhx

标签： html css

【解决方案1】：

变化：

.menu a:last-of-type {
  border-right: none;
}

到：

.menu li:last-of-type a {
  border-right: none;
}

.menu a {   
  border-right: 1px dotted #ccc;
}
.menu li:last-of-type a {
  border-right: none;
}

<ul class="menu">
  <li><a>list item 1</a></li>
  <li><a>list item 2</a></li>
  <li><a>list item 3</a></li>
  <li><a>list item 4</a></li>
  <li><a>list item 5</a></li>
</ul>

正如您推测的那样，您使用的规则是针对每个 a，因为它是每个 li 中的最后一个子节点。只需将 :last-of-type 移动到 li 即可。

【讨论】：

我相信 OP 想要选择所有 li 但最后一个。这将选择最后一个li。
@choz "我想为除最后一个之外的所有元素应用边框。"这就是它的作用
我只是不同意更多的实现来删除最后一个边框的边框。是的，这确实有效，但我认为最好只将边框应用于除最后一个之外的所有边框。

【解决方案2】：

您可以通过使用.menu li:not(:last-child) a 组合您的两个CSS 属性来为您想要有边框的元素。正如 choz 在下面的评论中指出的那样，在menu 之后有li 至关重要，因为li 中的每个a 都是其当前上下文中的最后一个孩子。因此，伪类应该适用于li。

 .menu li:not(:last-child) a {   
  border-right: 1px dotted #ccc;
  }

【讨论】：

这不起作用，因为每个 li 只有 1 个锚子。这将选择无，因为每个 <a> 都被视为最后一个孩子。
这里的 :last-child 不是应用于而是应用于
。它读作“

下的每个都在 .menu 下，其中
不是最后一个

”

【解决方案3】：

要选择所有lis 但不是最后一个，您可以使用它。

.menu li:not(:last-child) {
    border-right: 1px dotted #ccc;
}

要应用于不是最后一个a 元素，您可以这样做。

.menu li:not(:last-child) a {
    border-right: 1px dotted #ccc;
}

【讨论】：

【解决方案4】：

我会这样做

  .menu a {   
      border-right: 3px solid red;
  }
  .menu li:last-child a {
      border-right: none;
  }

【讨论】：

【解决方案5】：

您可以使用:not() 为除最后一个元素之外的所有元素设置规则，而不是为所有元素设置默认规则，然后为最后一个元素撤消它：

li:not(:last-of-type) a {
  border-right: 1px dotted #ccc;
}

【讨论】：