Question

我需要在链接之间添加管道，除了在最后一个之后。我的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>

我需要添加Pipe但是在最后一个链接之后不应该显示管道。我怎么能这样做呢。

Fiddle Link

P.S。：当我们有不同类别的不同链接时，这可以很容易地完成。在我的情况下，链接是动态的，在最后一个链接后不应显示管道

Answer 1

使用此选择器.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>

Answer 2

这是另一种方式：

'在每个链接之前添加一个管道 - 只有在另一个链接之后才添加一个'

.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>

Answer 3

我想你想要这样。

＆＃13;

.sample:last-child div {
   border: none;
}
.sample div {
  border-right: 1px solid #000;
  margin-right: 10px;
  padding-right: 10px;
}

＆＃13;

<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>

＆＃13;

Answer 4

一种方法是添加此CSS规则：

.sample:not(:last-of-type) {
    border-right: 1px solid black;
}

https://jsfiddle.net/9c8szuc5/2/

CSS：在除最后一个之外的所有div上添加管道

4 个答案: