css - 当元素类型不同时禁用最后一个元素的边框

Question

当元素类型不同时，如何禁用最后一个元素的边框，即。一个是段落，另一个是超链接？

http://jsfiddle.net/e4zjcmue/

div *:last-of-type:after { border-right: none; 不幸的是禁用了所有边框。

div * {
  display: inline;
}

div *:after {
  content: '';
  border-right: 1px solid blue;
}

div *:last-of-type:after {
  /* border-right: none; */
}

<div>
    <p>Lorem</p>
    <a href="#">Ipsum</a>
</div>

Answer 1

您似乎要寻找的选择器是 :last-child 而不是 last-of-type。

*:last-of-type 选择器选择父级下每个单一类型的最后一个元素。也就是说，它将选择最后一个 div、最后一个 p 等。在您的代码段中，第一个元素也是其类型的最后一个元素，因此所有边框都消失了.

然而，:last-child 仅选择父元素的最后一个子元素，因此在此实例中仅从 a 标签中移除边框。 :last-child 之前的 * 不是强制性的，因为选择器默认选择最后一个子元素，而不管其类型。

div * {
  display: inline;
}
div *:after {
  content: '';
  border-right: 1px solid blue;
}
div :last-child:after {
  border-right: none;
}

<div>
  <p>Lorem</p>
  <a href="#">Ipsum</a>
</div>