CSS：在除最后一个以外的所有div上添加管道
[英]CSS: Add pipe on all div except last
问题描述
I need to add pipe between links except after the last . 
除了最后一个之后，我需要在链接之间添加管道。 My html is rendered in the following way , html is rendered with same class. 我的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>
I need to add Pipe but after last link no pipe should be displayed . 我需要添加管道，但在最后一个链接之后，不应显示任何管道。 How can i do it for this case . 在这种情况下我该怎么办。
PS : This can be done easily when we have different links with different class . PS：当我们在不同的班级有不同的链接时，这很容易做到。 In my case links are dynamic and after last link no pipe should be displayed 就我而言，链接是动态的，在最后一个链接之后，不应显示任何管道
4 个解决方案
解决方案1
3 已采纳 2017-09-25 08:44:57
Use this selector .sample:not(:last-of-type) , which will target all but the last item. 使用此选择器.sample:not(:last-of-type) ，它将定位除最后一项以外的所有项。
Do note, when combining a class name with last-of-type , it will target any element type not being the last (if there is more than 1) having the given class. 请注意，将类名与last-of-type结合使用时，它将针对具有给定类的不是最后一个（如果大于1）的任何元素类型。
Updated fiddle (added the pipe to the div so it won't pick up the color from the p ) 更新了小提琴 （将管道添加到div以便它不会从p拾取颜色）
.sample:not(:last-of-type) > div::after {
content: ' | ';
}
Another option is last-child , .sample:not(:last-child) , which also will target all but the last. 另一个选项是last-child ， .sample:not(:last-child) ，它也将定位除最后一个以外的所有对象。
Do note, when using last-child , it means the last no matter class or element type, so if you have another element coming after the last sample , that will count as the last, and here is a fiddle sample showing how this rule will fail in cases like that. 请注意，使用last-child ，无论类或元素类型如何，它都表示最后一个，因此，如果在最后一个sample之后有另一个元素，则该元素将算作最后一个，这是一个小提琴样本，显示了此规则的执行方式在这种情况下失败。
Updated fiddle (added the pipe to the div so it won't pick up the color from the p ) 更新了小提琴 （将管道添加到div以便它不会从p拾取颜色）
.sample:not(:last-child) > div::after {
content: ' | ';
}
A third option is to use the immediate sibling selecor + , which target all sibling elements with the given class but the first. 第三种选择是使用直接同级selecor + ，它以给定类（但第一个）为目标的所有同级元素为目标。
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>
解决方案2
2 2017-09-25 08:51:08
Here's another way: 这是另一种方式：
'Add a pipe before each link - only if it comes after another one' “在每个链接之前添加一个管道-仅当它在另一个链接之后时”
.sample + .sample .para:before {
content: "|";
margin-right: 10px;
color: red;
}
.sample + .sample .para:before { content: "|"; margin-right: 10px; color: red; }
<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>
解决方案3
1 2017-09-25 08:41:27
I think you want like this. 我想你想要这样。
.sample:last-child div { border: none; } .sample div { border-right: 1px solid #000; margin-right: 10px; padding-right: 10px; }
<h1>This is a heading</h1> <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> <div class="sample" style="display:inline-block"> <div> <p class="para">link1</p> </div> </div> </div>
解决方案4
1 2017-09-25 08:48:05
One way to do it is to add this CSS rule: 一种方法是添加以下CSS规则：
.sample:not(:last-of-type) {
border-right: 1px solid black;
}
https://jsfiddle.net/9c8szuc5/2/ https://jsfiddle.net/9c8szuc5/2/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.