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的兼容性。

Answer 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即可。

Answer 2

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

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

Answer 3

要选择所有li但不最后一个，您可以使用此功能。

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

要应用不最后一个a元素，您可以执行此操作。

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

Answer 4

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

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

Answer 5

我会这样做

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

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

5 个答案: