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

Question

我有以下的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兼容性。

- Richard

---

将您的选择器更改为.menu li:last-of-type a 演示：https://jsfiddle.net/ybou5hhx/ - Arbel

Answer 1

你可以使用 .menu li:not(:last-child) a 来将两个 CSS 属性组合到想要添加边框的元素上。正如下面评论中 choz 指出的那样，重要的是在 menu 后面加上 li，因为在当前上下文中，li 中的每个 a 都是其父节点中的最后一个子元素。因此，伪类应该应用于 li 上。

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

- litel

---

这不会起作用，因为每个li只有一个锚点子元素。这将选择无，因为每个<a>都被认为是最后一个子元素。 - choz

这里的:last-child并不是应用在<a>标签上，而是应用在<li>标签上。它的意思是“在.menu下的非最后一个<li>下的每个<a>”。 - Thanasis Ioannidis

Answer 2

变更：

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

to:

.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 上即可。

- j08691

---

我认为 OP 想要选择除了最后一个 li 以外的所有 li。这将会选择最后一个 li。 - choz

@choz "我想给除了最后一个之外的所有<a>元素设置边框。" 这就是这样做的方式。 - j08691

我不同意增加更多的实现来移除最后一个li的边框。确实，这样做可以达到效果，但我认为最好的方法是将边框应用于除了最后一个之外的所有元素。 - choz

Answer 3

不需要为所有元素设置默认规则，然后再为最后一个撤销它，您可以使用:not()仅为除最后一个元素外的所有元素设置规则：

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

- Daniel Beck

Answer 4

为了选择所有的 li 但不包括最后一个，你可以使用以下代码。

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

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

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

- choz

Answer 5

我会这样做：

我会这样做

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

- Michael