除了最后一个 .我的 html 以下列方式呈现，html 是用相同的类呈现的。
<!DOCTYPE html>
<html>
<head>
<style>
p:last-of-type {
background: #ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
</body>
</html>
我需要添加管道，但在最后一个链接之后不应显示任何管道。对于这种情况，我该怎么做。
附言:当我们有不同类别的不同链接时，这可以很容易地完成。在我的例子中，链接是动态的，在最后一个链接之后不应显示任何管道
最佳答案
使用此选择器 .sample:not(:last-of-type)，它将定位除最后一项以外的所有项。
请注意，当将类名与 last-of-type 组合时，它将针对任何不是最后一个(如果有超过 1 个)具有给定类的元素类型.
Updated fiddle (将管道添加到div，这样它就不会从p中获取颜色)
.sample:not(:last-of-type) > div::after {
content: ' | ';
}
另一个选项是 last-child，.sample:not(:last-child)，它也将定位除最后一个之外的所有对象。
请注意，当使用 last-child 时，无论是类还是元素类型，它都表示最后一个，因此如果在最后一个 sample 之后有另一个元素>，这将算作最后一个，这里是 a fiddle sample显示在这种情况下此规则将如何失败。
Updated fiddle (将管道添加到div，这样它就不会从p中获取颜色)
.sample:not(:last-child) > div::after {
content: ' | ';
}
第三种选择是使用直接兄弟元素选择器 +，它针对具有给定类的所有兄弟元素，但第一个。
p:last-of-type {
background: #ff0000;
display: inline-block;
}
.sample + .sample > div::before {
content: ' | ';
}<h1>This is a heading</h1>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>
<div class="sample" style="display:inline-block">
<div >
<p class="para">link1</p>
</div>
</div>关于html - CSS:在除最后一个以外的所有div上添加管道，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46400877/